Was sind WebSockets? Wie wird WebSocket in Vue verwendet?

Was sind WebSockets? Wie wird WebSocket in Vue verwendet?

Was sind Websockets?

  Laienhaft ausgedrückt ist WebSocket ein Datenkommunikationsprotokoll für die Datenkommunikation zwischen Client und Server. Ähnlich wie das HTTP-Protokoll, aber die HTTP-Protokollkommunikation kann nur vom Client initiiert werden. Wenn unser Client beispielsweise eine Anfrage an den Server sendet, gibt der Server nur das Ergebnis unserer Abfrage zurück und der Server kann keine Nachrichten aktiv pushen an den Client.

  Wenn wir eine bidirektionale Konversation wünschen und der Server kontinuierliche Statusänderungen aufweist, können wir die „Polling“-Methode verwenden: Von Zeit zu Zeit wird eine Anfrage gesendet und der Server sendet uns den neuesten Status zurück. Dies ist jedoch eine Verschwendung von Ressourcen (Sie müssen ständig eine Verbindung zum Server herstellen oder HTTP ist immer geöffnet) und die Effizienz ist sehr gering.

  Die effektivste Lösung ist also die Verwendung von WebSocket: Der Server kann aktiv Informationen an den Client weiterleiten, und der Client kann auch aktiv Informationen an den Server senden, was einen echten wechselseitigen Dialog darstellt.

Verwendung von WebSocket in Vue

• Zuerst benötigen wir den New WebSocket-Konstruktor

let url = config.wsUrl

this.ws = new WebSocket(url)

Dann können wir den WebSocket-Status auf ws überwachen

• Achten Sie auf WebSocket-Verbindungen

this.ws.addEventListener("open", e => {
    
    
       console.log('连接已经建立！');
       //连接建立完成后我们就可以发送消息    
        this.ws.send("heartbeat");  //发送消息
 })
 //或者
this.ws.onopen = () => {
    
    
    console.log('连接已经建立！');
}

• Hören Sie auf WebSocket, um Nachrichten zu empfangen

this.ws.addEventListener("message", (e) => {
    
    
       console.log('收到消息！', e);
       //收到消息后我们就可以对消息进行处理
})
//或者
this.ws.onmessage = (e) => {
    
    
    console.log('接受到信息', e);
}

• Achten Sie darauf, dass die WebSocket-Verbindung geschlossen wird

this.ws.addEventListener("close", (e) => {
    
    
    console.log('连接已断开！');
 })
 //或者
this.ws.onclose = () => {
    
    
    console.log('连接已断开！');
}

• Auf WebSocket-Fehler warten

this.ws.addEventListener("error",(e)=>{
    
    
    console.log('报错', e);
})  
//或者
this.ws.onclose = (e) => {
    
    
    console.log('报错', e);
}

Wie man es tatsächlich verwendet:

initWebSocket() {
    
    
	this.flag = false   //通过flag对websocket关闭后再重启
	//这里我把请求的路径放在了config文件中了（ws://10.168.245.148:7001）
	let url = config.wsUrl
	this.ws = new WebSocket(url)
	this.ws.addEventListener("open", e => {
    
    
		this.sendHeartbearTime = new Date().getTime()  //发送心跳时间
		this.getHeartbearTime = new Date().getTime()   //接收心跳时间
		this.timer = setInterval(_ => {
    
    
			this.sendHeartbearTime = new Date().getTime()  //重新获取发送心跳时间
			if (this.sendHeartbearTime - this.getHeartbearTime >= 20000 || !this.ws) {
    
    
				//间隔20s心跳超时重启
				clearInterval(this.timer)  //清除定时器
				this.flag = true
				this.ws && this.ws.close()
			} else {
    
    
				//向服务器发送消息
				this.ws.send("heart");
			}
		}, 1000);
	})
	this.ws.addEventListener("message", (e) => {
    
    
		console.log("收到消息", e);
		try {
    
    
			if (e.data != 'heart') {
    
    
				//处理接收后的操作
			} else {
    
    
				this.getHeartbearTime = new Date().getTime()  //重新获取接收心跳开始时间
			}
		} catch (e) {
    
    
			console.log(e);
		}
	})
	this.ws.addEventListener("close", (e) => {
    
    
		this.ws = null
		if (this.flag) this.initWebSocket() //重启websocket
	})
	this.ws.onerror = e => {
    
    
		this.ws = null
		console.log("错误", e);
	}
},
created() {
    
    
	//渲染的DOM开始时创建连接
	this.initWebSocket()
},
beforeDestroy() {
    
    
	//DOM销毁之前关闭连接
	this.ws && this.ws.close()
},

Referenzlink:
Vue-WebSocket-Prinzip und Verwendung
von Vue zur Verwendung von WebSocket