在VUE中使用websocket

websocket概念

1、WebSocket是HTML5下一种新的协议,在单个TCP连接上进行全双工通信

2、Websocket是一个持久化的协议,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输,能更好的节省服务器资源和带宽并达到实时通讯的目的。

websocket前端代码实现

javascript 复制代码
data() {
return {
	// 后面 webSocket 是后台设定的接口地址,token是你这个前台的识别码id。
    // 用于区分,比如你多个地方链接后台,后台推送数据的时候需要根据这个id不同,给对应的人推送,不然就推送到所有建立链接的网页上了      
    sockPath: 'ws://' + '172.16.xx.100:9207/websocket/' + getToken(), // 后台地址
    socket: null,
}
},
created() {
	this.websoketInit();
},
method() {
	websoketInit() {
	  if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        this.socket = new WebSocket(this.sockPath); // 实例化

        this.socket.onopen = this.websocketOnOpen; // 监听 连接

        this.socket.onerror = this.websocketOnError; // 监听 错误信息

        this.socket.onmessage = this.websocketOnMessage; // 监听 消息,注:方法后面不能加空括号(),否则就接收不到数据了

        this.socket.onclose = this.websocketOnClose; // 监听 关闭
      }
	},
	/** 连接 成功 时的回调函数 */
    websocketOnOpen() {
      console.log("websocket 连接成功");
    },
    /** 连接 错误 时的回调 */
    websocketOnError(err) {
      console.log("websocket 连接错误 " + err);
    },
    //后台消息推送过来,接收的函数,参数为后台推过来的数据。
    websocketOnMessage(msg) {
      // json数据使用JSON.parse():报错 Unexpected number in JSON at position 106
      // 有浏览器是不兼容JSON这个对象的,或者有的里面有JSON.parse解析不了的东西,所以暂时还是使用: eval("("+data+")");
      var temp = eval("(" + msg.data + ")");
      // js判断数组或对象
      if (temp.hasOwnProperty("name")) {
        console.log('name值', name)
      }
    },
    /** 连接 关闭 的回调 */
    websocketOnClose(event) {
      // socket是链接的实例,close就是关闭链接
      this.socket.close();
      console.log("断开链接成功");
    },
},
相关推荐
一个处女座的程序猿O(∩_∩)O2 小时前
小型 Vue 项目,该不该用 Pinia 、Vuex呢?
前端·javascript·vue.js
hackeroink5 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss
迷雾漫步者6 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-7 小时前
验证码机制
前端·后端
燃先生._.8 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
高山我梦口香糖9 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235249 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_7482402510 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar10 小时前
纯前端实现更新检测
开发语言·前端·javascript