Die Verwendung von WebSocket in Vue

Projektszenario:

提示：项目相关背景：

Was ist WebSocket? :

WebSocketIst ein Computerkommunikationsprotokoll, das einen Vollduplex-Kommunikationskanal über eine einzelne TCP-Verbindung bereitstellt. Ermöglicht Echtzeitkommunikation zwischen Web-Clients und Servern und ermöglicht so einen bidirektionalen Datenaustausch mit geringerer Latenz und geringerem Overhead als herkömmliche HTTP-Verbindungen.
WebSocketDie Technologie wird häufig in Webanwendungen eingesetzt, die eine Echtzeit-Datenübertragung erfordern, beispielsweise Chat-Anwendungen, Online-Spiele und Finanzhandelsplattformen. Mithilfe von WebSocketHTTP können Webanwendungen dauerhafte Verbindungen zwischen Browsern und Servern herstellen und aufrechterhalten und so sofortige Aktualisierungen von Webinhalten ohne ständige HTTP-Anfragen ermöglichen.

Projektszenario:

Die vom Benutzer auf dem mobilen Endgerät veröffentlichten Informationen müssen in Echtzeit in einem Echtzeit-Popup-Fenster auf dem PC-Terminal angezeigt werden. Hier ist das Websocket-Protokoll erforderlich.

---

wie benutzt man

如果你是http协议，使用ws，如果是https协议，使用wss协议，我这里是wss

direkt in methodsder Definition einer Init-Methode

1 Rufen Sie zunächst die Methode im erstellten oder gemounteten Hook auf

    this.init()

首先判断浏览器是否支持WebSocket协议

  //判断浏览器是否支持WebSocket
  if(typeof(WebSocket) === "undefined"){
    
    
     alert("您的浏览器不支持socket")
  }

2 Init-Methode

    init () {
    
    
       //如果你是http协议，使用ws，如果是https协议，使用wss协议，我这里是wss
      this.ws = new WebSocket('wss://127.0.0.1/server/web-socket')

      // 监听是否连接成功
      this.ws.onopen = () => {
    
    
        console.log('ws连接状态成功：' + this.ws.readyState)
        // 连接成功则发送一个数据
        // this.ws.send('连接成功')
      }

      // 接听服务器发回的信息并处理展示
      this.ws.onmessage = (data) => {
    
    
        console.log('接收到来自服务器的消息：')
        const wsData = JSON.parse(data.data)
        const message = {
    
    
          title: '货主发布',
          desc: `起始地：${
      
      wsData.fromWhere}<br/>目的地：${
      
      wsData.toWhere}<br/>货物类型：${
      
      wsData.goodsType}`,
          duration: 3
        }
        this.$Notice.info(message)
      }

      // 监听连接关闭事件
      this.ws.onclose = () => {
    
    
        // 监听整个过程中websocket的状态
        console.log('ws连接状态关闭：' + this.ws.readyState)
      }

      // 监听并处理error事件
      this.ws.onerror = function (error) {
    
    
        console.log(error)
      }
    },

3 Schließen Sie WebSocket vor der Zerstörung

 destroyed () {
    
    
        // 销毁监听
        this.ws.close()
    }

---