websocket

sanly_shi
于 2024-05-10 18:35:04 发布
阅读量84
点赞数 2
文章标签： websocket 网络协议网络
本文链接：https://blog.csdn.net/weixin_36774307/article/details/138677122
版权
// WebSocket是一种在单个TCP连接上进行全双工通信的协议，它允许服务端和客户端之间进行实时、双向的数据传输。相比于传统的HTTP协议，WebSocket能够实现服务器主动向客户端推送消息，而不仅限于客户端发起请求、服务器响应这种模式。



// WebSocket的工作原理是通过一个握手过程（Upgrade HTTP请求）来升级初始的HTTP连接为WebSocket连接。一旦建立WebSocket连接，双方就可以在同一个TCP连接上自由地发送数据帧，无需每次通信都进行请求-响应的完整流程，这大大减少了延迟，提高了效率，非常适合实时应用，如聊天应用、协同编辑、股票报价、游戏、实时分析等场景。



// WebSocket协议的一个关键特征是其消息格式，它是基于帧的，可以发送文本或者二进制数据，并且支持消息分片和压缩。



// WebSocket协议 RFC 文档为：RFC 6455。在现代Web开发中，WebSocket得到了广泛的应用和支持，大部分主流浏览器和服务器框架都提供了对WebSocket的支持。




// WebSocket API

// 在JavaScript中使用WebSocket时，通常会用到以下API方法和属性：

// WebSocket构造函数

// var socket = new WebSocket(url[, protocols]);

// url：必需参数，表示WebSocket服务器的URL，例如：ws://example.com/ws 或者安全连接 wss://example.com/ws。

// protocols：可选参数，是一个字符串或字符串数组，指定了子协议名称，用于协商连接时的子协议选择。

// WebSocket对象的主要方法：

// 开启连接

// socket.connect()（非标准，部分实现可能提供此方法以重新连接）

// 关闭连接

// socket.close([code[, reason]])

// code：一个可选的关闭代码，默认值为1000（正常关闭）。

// reason：一个可选的关闭原因字符串。

// 发送数据

// socket.send(data)

// data：要发送的消息，可以是字符串、ArrayBuffer、Blob或ArrayBufferView对象。

// 监听事件

// WebSocket对象有多个事件监听方法，用于处理连接状态变化和数据接收：



// socket.onopen = function(event) {

// // 连接成功打开时触发

// };



// socket.onmessage = function(event) {

// // 接收到消息时触发

// let data = event.data; // 消息数据

// };



// socket.onerror = function(error) {

// // 当发生错误时触发

// };



// socket.onclose = function(event) {

// // 连接关闭时触发

// let code = event.code; // 关闭码

// let reason = event.reason; // 关闭原因

// let wasClean = event.wasClean; // 是否是正常关闭

// };



// WebSocket对象的重要属性：

// socket.readyState：

// WebSocket.CONNECTING （0）正在尝试连接

// WebSocket.OPEN （1）已连接并可以通信

// WebSocket.CLOSING （2）连接正在关闭

// WebSocket.CLOSED （3）连接已关闭或从未开启过

// 返回连接状态，可以是：

// socket.bufferedAmount：




// 返回仍在缓冲区中等待发送出去的字节数，用于判断是否适合发送更多的数据。

// 以上就是WebSocket API中开发者常用的一些方法和属性。实际使用时，根据应用场景，开发者会利用这些API构建功能丰富的实时交互应用。



// 下面是一些常用的WebSocket封装，实现了WebSocket的断线重连机制，供参考

class WebSocketClient {

constructor(url,reconnectInterval = 500){

this.url = url;

this.reconnectInterval = reconnectInterval;

this.initialize();

}

initialize(){

this.ws = new WebSocket(this.url)

this.ws.onopen = this.onOpen.bind(this)

this.ws.onmessage = this.onMessage.bind(this)

this.ws.onerror = this.onError.bind(this)

this.ws.onclose = this.onClose.bind(this)

}

onOpen(event){

console.log('Connection opened:',event)

//连接打开时相关初始化代码

}

onMessage(event){

console.log('Message received:',event.data)

//处理收到的消息

}

onError(event){

console.log('WebSocket Error:',event)

//处理错误

}

onClose(event){

console.log('Connection closed:',event)

//处理关闭

this.tryConnect()

}

send(message){

if(this.ws.readyState === WebSocket.OPEN){

this.ws.send(message)

}else{

console.error('WebSocket is not open. Message not sent:', message)

}

}

close(){

if(this.ws.readyState === WebSocket.OPEN){

this.ws.close()

}else{

console.log('WebSocket is already closed.');

}

}

}



// 使用封装的WebSocketClient并设置重连间隔为5秒

const wsClient new WebSocketClient('ws://example.com/ws',5000)

wsClient.send('Hello WebSocket') // 发送消息

//...

wsClient.close() // 关闭连接

// 您可以在此添加代码来测试重连功能





// 在上面的示例中，tryReconnect方法用于尝试重新建立WebSocket连接。当连接意外关闭时，onClose方法会被调用，并触发tryReconnect。initialize方法用于创建新的WebSocket实例并设置回调函数。

// 在实际应用中，您可能还需要考虑加入以下逻辑：

// 断线重连尝试次数限制，避免无限尝试重连造成资源浪费。

// 连接尝试的退避策略（exponential backoff），即每次尝试重连后等待的时间逐渐增长，直到一定限度。

// 连接成功后，重置退避计时器或重连尝试次数。

// 重连机制可能需要根据您的具体业务场景和需求进行定制。请确保在不同的网络和运行条件下充分测试您的实现。