WebSocket在vue项目中的使用

最新推荐文章于 2022-12-21 11:48:35 发布

原创最新推荐文章于 2022-12-21 11:48:35 发布 · 1.6k 阅读

6 ·

CC 4.0 BY-SA版权

前端学习专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了WebSocket在项目中的应用，包括其定义、属性及如何创建和管理WebSocket连接。通过具体代码示例，展示了前端如何实时渲染后台消息，实现与服务器的双向通信。

1、使用背景：项目前端需要实时渲染后台传回的消息。
2、WebSocket 的定义是：是一个对象，用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据。
WebSocket 对象经常使用到的属性有一下这些：

WebSocket.onopen：用于指定连接成功后的回调函数
WebSocket.onmessage：用于指定当从服务器接受到信息时的回调函数
WebSocket.onclose：用于连接关闭后的回调函数
WebSocket.onerror：用于连接关闭后的回调函数
WebSocket.readyState：当前的链接状态
WebSocket.url：WebSocket的绝对路径
WebSocket.protocol：服务器选择的下属协议
3、使用 WebSocket 需要先创建一个 WebSocket 的对象：new WebSocket（url）
4、下面是在项目中使用的具体代码

methods: {
	// 初始化一个 websocket 对象，同时给基本属性赋值
	initWebSocket: function () {
        let host = window.location.host; // 这个 host 根据具体接口的实际情况自行定义 
        // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https，此处传入需要跟后台连接的接口路径
        this.websock = new WebSocket(`ws://${host}/api-tframe/atf/${this.form.projectId}`);
        this.websock.onopen = this.websocketonopen;
        this.websock.onerror = this.websocketonerror;
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onclose = this.websocketclose;
    },
    // 定义 websocket open属性的函数
	websocketonopen: function () {
        console.log('WebSocket连接成功');
    },
    // 定义 websocket onerror属性的函数
    websocketonerror: function (e) {
        console.log('WebSocket连接发生错误');
    },
    // 定义 websocket onmessage属性的函数
    websocketonmessage: function (e) {
        console.log('e:', e.data);
        this.messageList.push(e.data);
    },
    // 定义 websocket onclose属性的函数
    websocketclose: function (e) {
        console.log('connection closed');
    }
},
created () {
	// 调用初始化函数（这个可以根据具体业务在具体操作下初始化）
     this.initWebSocket();
},
// 页面销毁时关闭 websocket 的连接
destroyed () {
 	 this.websocketclose();
}