Configuring WebSocket connection with Vue+SpringBoot

Front end Vue

  • Using constructors to build Websocket objects
WebSocket(url[, protocols])
  • The callback functions of the object are:

Used to specify the callback function after the connection is closed.


Used to specify the callback function after a connection failure.


Specifies the callback function when information is received from the server.


Used to specify the callback function after a successful connection.

  • The methods are as follows:
    Close current connection
 WebSocket.close([code[, reason]])

send data



  data() {
    return {
      websock: null,
      websocketUrl: "ws://localhost:8080/webSocketServer/"+this.$store.state.userTel,
  methods: {

    initWebSocket() {
      //Initialize weosocket
      this.websock = new WebSocket(this.websocketUrl);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    //Here are the callback functions
    websocketonopen() {
      //Execute the send method to send data after the connection is established
      console.log("Connection successful");
    websocketonerror() {
      //Connection establishment failed reconnect
      console.log("Connection failed reconnect");
    //Accept data
    websocketonmessage(e) {
      console.log("Accept data");
      let data = JSON.parse(;

    //Two methods
    websocketsend(message) {
      //Data transmission
      let data = {
        "message": "hello world"
    websocketclose() {
    created() {
    destroyed() {
      this.websock.close(); //Disconnect websocket after leaving the route

Back end SpringBoot

In the WebSocket application, the server publishes a WebSocket endpoint, and the client uses the URI of the endpoint to connect to the server. After the connection is established, the server and the client can send messages at any time when the connection is opened. The client usually only connects to one server, and a server accepts connections from multiple clients
WebSocket protocol has two parts: handshake and data transmission
WebSocket URL format: ws://host:port/path?query

  • Creating WebSocket s with annotations
  • send message
    • 1. Get the Session object from the connection
    • 2. Use Session object to get RemoteEndpoint object
    • 3. Use RemoteEndpoint object to send messages to the other party
  • Send messages to all connecting parties
    Get all connected sessions and return Set
    This allows you to use traversal to send messages to each session object
  • receive messages
    Use @ OnMessage annotation to receive messages. Each @ ServerEndpoint class can have at most three @ OnMessage annotation methods, namely:
public class ReceiveEndpoint {
   public void textMessage(Session session, String msg) {
      System.out.println("Text message: " + msg);
   public void binaryMessage(Session session, ByteBuffer msg) {
      System.out.println("Binary message: " + msg.toString());
   public void pongMessage(Session session, PongMessage msg) {
      System.out.println("Pong message: " + 


  • Implementation interface
    • Encoder.Text for text messages
    • Encoder.Binary for binary messages
  • Add the encoder name to the optional parameter encoders in @ ServerEndpoint
  • Using sendObject(Object data) to send messages


  • Implementation interface
  • Add the encoder name to the optional parameter decoders in @ ServerEndpoint
  • Methods using @ OnMessage can use custom Java objects as parameters

Only make records, and improve after more understanding
Recommended blog:

Reference website

Tags: Session JSON Vue SpringBoot

Posted on Mon, 22 Jun 2020 23:56:47 -0400 by oskom