How to use global WebSocket elegantly

describe

The project requirement is to build a global chat system, accept new messages and update chat content in real time

The method is to create a global WS attribute, send, accept, and use xuex to store the required data.

Code steps

first step

UtilsNew,Used to handle all ws events,

The code is as follows:

//utils/
import { Notification } from 'element-ui'  //Introduce ui component to inform messagesimport router from '@/router/routers'  //Introduce router to make page jumpimport store from '@/store'  //Introduce store for chat message storage
export default {
  ws: {},
  //Send ws method  sendWs: function(data) {
    (data, 'Sent Message')
    ((data))
  },
  //Initialize ws  initWs: function() {
    const that = this
    if ('WebSocket' in window) {
      // Open a web socket      const ws = new WebSocket(.VUE_APP_WS_API)

       = ws
       = function() {
        ('')
        // Web Socket is connected, use the () method to send data, for example        ({name:'Zhang San'})
      }
       = function(evt) {
        ('Global data received...', )
        var receivedData = ()
        
        // Add chat history code        // ('ADD_CALL_LOG', data)

        //New message notification        //({
        // title: 'Message',        // message: 'You have a new message',        //  onClick: () =&gt; {
        //     if ( != '/airobot/chat') {
        // Page jump        //      ('/airobot/chat')
        //    }
        //  }
        //})
      }
    }
    //Exception disconnection and reconnection (updated in 2023.4.12)     = function(err) {
        ('websocket disconnected: ' + err, )
        if ( != 0) {
          setTimeout(() =&gt; {
            ()
          }, 1000)
        }
      }
  },
  //Disconnect the socked method  closeWs: function() {
    // Turn off the timer    ('Switch off the timer')
    clearInterval()
    ('Close ws')
    ()
  }
}

Step 2

//
import globalWs from './utils/'
.$globalWs = globalWs

Explanation of elegance

You can choose to initialize ws at any time, either in Chinese or after verifying user information

You can use() to send chat messages at any time

Initialization in js:

import globalWs from '@/utils/'
()

Initialization in vue:

()

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.