Introducing Vuecket

GitHub commit to help

Server methods

In the previous chapter, I cheated a little by granting read / write access to the message collection to all site visitors at once. It is highly discouraged to do this, because then, through data-fiber, any sender can overwrite all messages on the server with something of his own or even erase them. Data-fibers should only be used to link custom browser-side objects to server-side data objects belonging to the same user. This means no static models or data!

How can we fix the situation? For this we have to:

• Ditch data-fiber, which works across the board, and only use it to initially load the message list.
• Use the server side method of adding a new message to the list.

Thus, everyone can only add new messages to the general list, but they can neither delete nor change existing ones. Let’s also complicate the server side a little: we will save not just JSON received from the client, but a specialized Message class with the necessary fields, methods, etc. to work with data on the server side.

Let’s start with a Message class for storing user messages. This might be some JPA class, by the way, that allows you to save data to a database.

public class Message implements IClusterable {
	@JsonProperty("message")
	private String text;
	private Date date;
	
	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public Date getDate() {
		return date;
	}
	public void setDate(Date date) {
		this.date = date;
	}	
}

Pay attention to @JsonProperty. Thus, we have redirected the JSON field “message” to our Java field “text”.

Next, let’s change ChatApp.java to do what is described above: add a vuecket method to save the message. Also in the code, you can notice the cutting of the list of messages to only 20 (Habr users are very diligent), but when you delete a message, it is still saved forever in the server logs.

@VueFile("ChatApp.vue")
public class ChatApp extends VueComponent {
	
	private static final Logger LOG = LoggerFactory.getLogger(ChatApp.class);
	private static final int MAX_SIZE = 20;
	private static final IModel> MESSAGES = Model.ofList(new ArrayList());

	public ChatApp(String id) {
		super(id);
		addDataFiber("messages", MESSAGES, true, false, false);
	}
	
	@VueMethod
	public synchronized void addMessage(Context ctx, Message message) {
		List list = MESSAGES.getObject();
		list.add(message);
		trimToSize(list, MAX_SIZE);
		IVuecketMethod.pushDataPatch(ctx, "messages", list);
	}
	
	private void trimToSize(List list, int size) {
		//It's OK to delete one by one because in most of cases we will delete just one record
		while(list.size()>size) LOG.info("Bay-bay message: {}", list.remove(0));
	}
}

See the @VueMethod annotation method? In it, we receive a new message, save it in the list, cut it and send the already updated list to the client. Also note that data-fiber has been reconfigured to only request data when the Vue application boots up.

We also need to change the logic in ChatApp.vue so that instead of the local “messages” field, send a new message to the server in asynchronous mode (vcInvoke)

module.exports = {
    data: function() {
        return {
            text : "",
            messages: []
        }
    },
    methods: {
    	addMessage : function() {
    		this.vcInvoke("addMessage", {
    			message: this.text,
    			date: new Date()
    		});
    		this.text = "";
    	}
    }
}

What we learned from the chapter:

• How to Create Server Side Methods for Vuecket
• How to call methods on the server from a browser
• How to send the necessary changes to the client

For a law-abiding visitor, nothing has changed, but a hacker can no longer so easily change the general list of messages on the server

GitHub commit to help

Conclusion

On this today, let me round off. There are many more improvements that can be made to our code, but I’ll leave that to you, dear readers. If you need help, write, we will help!

Do you like the framework? Please share your opinion. After all, it is your opinion that Open Source lives and develops.

Spoiler of upcoming Vuecket improvements

• WebSocket support for more reactive client-server communication.
• The ability to send the delta of changes between the browser and the server, and not the entire object as a whole.
• More settings for data-fibers to fine tune them.
• A set of Vuecket / Wicket components that are already pre-integrated with the most interesting VueJS libraries, for example, the already mentioned component for displaying text in Markdown