【前端】websocket 讲解与项目中的使用（附源码）

let url = ${process.env['VUE_APP_WEBSOCKET']}/websocket

let ws = new WebSocket(url)

ws.addEventListener(‘open’, e => {

console.log(‘长连接连接成功’)

// 执行心跳方法

dispatch(‘wsHeartStart’)

})

websocket 链接成功以后，开启心跳方法。心跳功能的实现如下：

const state = {

ws: null,

// 心跳时间（s）

wsTimeout: 20,

// 等待心跳响应时间(s)，等待心跳的响应时间要大于心跳时间5s以上

waitHeartTime: 25

}

// 开启心跳

wsHeartStart({ state, dispatch }) {

timer.wsTimeoutObj = setTimeout(() => {

if(state.ws && state.ws.readyState == 1) {

state.ws.send(‘’)

} else {

dispatch(‘handlerWSError’)

}

}, state.wsTimeout * 1000)

timer.serverTimeoutObj = setTimeout(() => {

console.log(‘接收心跳异常！’)

dispatch(‘handlerWSError’)

}, state.waitHeartTime * 1000)

}

稍微解释一下：上面这个代码片段，描述了心跳的基本意思；就是用定时器去向服务端发送一个空的字符串，我们与后端约定，当后端 ws 收到空字符串的时候，要回一个字符串。如果我们没有收到，则判断为 接收心跳异常，准备重连机制。（完整代码在文章末尾）

要点总结

===================================================================

要点总结的内容，建议大家细细品一下。

• WebSocket 协议本质上是一个基于 TCP 的协议。为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息 "Upgrade: WebSocket" 表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。【如下图：】