vue3+websocket的创建和使用，页面刷新保持长连接

最近一期的项目使用到了websocket，原因当然是因为长连接的特性，可以让网页实时接收到最新数据并更新页面。

区别于http，只能由用户端发送请求，服务端给出响应。

而websocket的特点在于可以主动给用户推送消息，因为二者之间会建立一个消息通道，只要没有断开，可以一直通信

开整！

1.建立连接，发送请求，接收响应

创建和使用都很简单，为了顾及页面刷新断开连接的问题，我们将websocket实例定义在一个全局变量上，这样任何一个页面刷新，都可以通过重新建立连接而恢复。

新建一个websocket.js

const creatWebSocket = () => {return new Promise((resolve, reject) => {//由服务端提供一个ws地址↓const websocketUrl = 'ws://ip:port/test'window.webSocket = new WebSocket(websocketUrl)window.webSocket.addEventListener('open', () => {console.log('连接成功');//监听接收消息window.webSocket.onmessage = function(message) {console.log(message)}webSocket.onerror = function() {reject(false)}webSocket.onclose = function() {webSocket = null// 清除保活定时器console.log('检测到连接断开');}})})
}
export default creatWebSocket 

通过promise创建，并将结果导出。

其他页面导入使用，可以实现在创建完成后，异步执行其他行为，如登录请求，一定要在连接成功之后再执行。

那么怎样发送请求并接受对应的响应信息呢？

onmessage中怎样把收到的数据返回给请求函数呢?

这里我们使用一个对象requestPromises来存储请求时的回调函数，用于在接收时数据时返回给请求体，代码如下

const sendSock = (data) => {return new Promise((resolve, reject) => {if (window.webSocket) {requestPromises = {resolve,reject}// 发送请求window.webSocket.send(data)} else {ElMessage({message: '服务断开连接',grouping: true,type: 'error',})}})
}

而在上述的onmessage中，此时可以这样写

window.webSocket.onmessage = function(message) {if (message.errorCode == 0) {requestPromise.resolve(decryptedObj);}else{//统一处理请求出错提示}
}

2.页面刷新保持长连接

首先当页面刷新时，websocket连接一定会断开。

因为当浏览器页面刷新时，WebSocket连接会断开，这是因为页面刷新会导致浏览器重新加载页面内容。页面刷新本质上是浏览器重新获取HTML文档并重建页面的所有资源，包括JavaScript文件和其他依赖项。因此，WebSocket连接也会被关闭。

我们可以实现的是，刷新时，在App.vue页面的onBeforeUnmount生命周期中主动关闭连接，在生命周期onBeforeMount重新建立连接，因为任何页面的刷新都会执行这一环节。

onBeforeMount(){//重新建立websocket连接
}onBeforeUnmount(() => {window.webSocket.close()window.webSocket = null
})

有网友说，Web Worker可以保持长连接不断开，有时间可以研究下。