WebSocket とは何ですか? WebSocket は Vue でどのように使用されますか?
ウェブソケットとは何ですか?
平たく言えば、WebSocket はクライアントとサーバーのデータ通信のためのデータ通信プロトコルです。http プロトコルと似ていますが、http プロトコル通信はクライアントによってのみ開始できます。たとえば、クライアントがサーバーにリクエストを送信した場合、サーバーはクエリの結果のみを返し、サーバーはメッセージを積極的にプッシュすることはできませんクライアントに。
双方向の会話が必要で、サーバーの状態が継続的に変化する場合は、「ポーリング」メソッドを使用できます。時々、リクエストが送信され、サーバーは最新の状態を返します。ただし、これはリソースの無駄であり (常にサーバーに接続する必要があるか、HTTP が常に開いている必要があります)、効率は非常に低くなります。
したがって、最も効果的な解決策は WebSocket を使用することです。サーバーはクライアントに情報をアクティブにプッシュでき、クライアントもサーバーに情報をアクティブに送信できます。これは実際の双方向の対話です。
Vue での WebSocket の使用
- まず、New WebSocket コンストラクターが必要です
let url = config.wsUrl
this.ws = new WebSocket(url)
次に、ws で WebSocket のステータスを監視できます。
- WebSocket 接続をリッスンする
this.ws.addEventListener("open", e => {
console.log('连接已经建立！');
//连接建立完成后我们就可以发送消息
this.ws.send("heartbeat"); //发送消息
})
//或者
this.ws.onopen = () => {
console.log('连接已经建立！');
}
- WebSocketをリッスンしてメッセージを受信します
this.ws.addEventListener("message", (e) => {
console.log('收到消息！', e);
//收到消息后我们就可以对消息进行处理
})
//或者
this.ws.onmessage = (e) => {
console.log('接受到信息', e);
}
- WebSocket 接続の終了をリッスンする
this.ws.addEventListener("close", (e) => {
console.log('连接已断开！');
})
//或者
this.ws.onclose = () => {
console.log('连接已断开！');
}
- WebSocket エラーをリッスンする
this.ws.addEventListener("error",(e)=>{
console.log('报错', e);
})
//或者
this.ws.onclose = (e) => {
console.log('报错', e);
}
実際の使い方：
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()
},