vue项目中如何使用websocket

这篇文章将为大家详细讲解有关Vue项目中如何使用websocket，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

什么是WEBSocket？

“WebSocket 是 HTML5 开始提供的一种在单个 tcp 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket api 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。”

在utils下新建websocket.js文件

// import { showInfoMsg, showErrORMsg } from '@/utils/popInfo'import ElementUI from 'element-ui';function initWebSocket(e) {    console.log(e)    const wsUri = WS_API + "/webSocket/" + e;    this.socket = new WebSocket(wsUri)//这里面的this都指向vue    this.socket.onerror = webSocketOnError;    this.socket.onmessage = webSocketOnMessage;    this.socket.onclose = closeWebsocket;}function webSocketOnError(e) {    ElementUI.Notification({        title: '',        message: "WebSocket连接发生错误" + e,        type: 'error',        duration: 0,    });}function webSocketOnMessage(e) {    const data = JSON.parse(e.data);    console.log(data.msgType === "INFO", data.msgType === "INFO")    if (data.msgType === "INFO") {        ElementUI.Notification({            title: '',            message: data.msg,            type: 'success',            duration: 3000,        });    } else if (data.msgType === "ERROR") {        ElementUI.Notification({            title: '',            message: data.msg,            type: 'error',            duration: 0,        });    }}// 关闭websiocketfunction closeWebsocket() {    console.log('连接已关闭...')}function close() {    this.socket.close() // 关闭 websocket    this.socket.onclose = function (e) {        console.log(e)//监听关闭事件        console.log('关闭')    }}function webSocketSend(agentData) {    this.socket.send(agentData);}export default {    initWebSocket, close}

如果想刷新重新链接websocket 可以在App.vue页面里添加个钩子函数

  mounted() {    //当在任一路由页面被刷新时,便是根组件app被从新建立,此时能够进行webSocket重连    //从localStorage中获取用户信息,是登陆状态则能够进行webSocket重连    let token = localStorage.getItem("token");    if (token) {      // userMessage = JSON.parse(userMessage);      this.$websocket.initWebSocket(token);    }  },

客户端主动关闭websocket 在关闭的地方触发函数就可以

 loGout() {      // localStorage.clear();      localStorage.removeItem("token");      this.$websocket.close();      this.$store.dispatch("LogOut").then(() => {        location.reload();      });    },

注：$webSocket 是在main.js中全局注册了websocket.js文件

关于“vue项目中如何使用websocket”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。