目录
一、Websocket是什么
二、Websocket的基本使用
使用介绍
第一步
第二步
第三步
第四步
常用API介绍
WebSocket(url[, protocols])
WebSocket.readyState
WebSocket.send(data)
WebSocket.close([code[, reason]])
WebSocket.bufferedAmount
WebSocket.extensions
WebSocket.binaryType
三、Websocket的封装
vue代码
react代码
一、Websocket是什么
当一个Web应用程序需要实现实时双向通信时，传统的 HTTP 协议并不是最佳选择，因为HTTP是一个请求/响应协议，它的工作方式是客户端发送一个请求给服务器，服务器然后响应该请求，并发送一个响应给客户端。这种模式通常是单向的，客户端只能发起请求，而服务器只能响应请求。这意味着，客户端无法在不发出新请求的情况下接收来自服务器的新数据。
WebSocket 协议就是为了解决这个问题而产生的，它可以在客户端和服务器之间建立持久的连接，以便实现双向通信。在建立连接之后，客户端和服务器可以随时发送消息，而不需要通过HTTP请求/响应的方式进行通信。此外，WebSocket还支持二进制数据的传输，这使得它更加灵活，可以用于许多不同的应用程序场景。
WebSocket协议的工作方式如下：
- 客户端向服务器发起一个WebSocket握手请求。这个请求与HTTP请求非常相似，但包含了一些附加的头部信息，以表示这是一个WebSocket请求。
- 服务器对该请求进行响应，包含一个状态码和一些头部信息。这个响应是HTTP响应，但同样包含了一些附加的头部信息，以表示这是一个WebSocket响应。
- 客户端和服务器之间的连接现在已经建立，并且可以进行双向通信了。客户端和服务器都可以随时发送消息，这些消息会被封装为WebSocket帧并通过WebSocket连接进行传输。
需要注意的是，WebSocket协议与传统的HTTP协议不同，因为它不是基于请求/响应模式的。这意味着，一旦连接建立，客户端和服务器就可以随时发送消息，而不需要等待对方先发出请求。此外，WebSocket协议还支持心跳包机制，可以检测连接是否还处于活动状态。
总之，WebSocket协议提供了一种高效、可靠、灵活的方式来实现Web应用程序之间的实时双向通信。它是一个强大的工具，可以用于许多不同的应用程序场景，包括在线游戏、实时聊天、数据传输和多人协作等等。
二、Websocket的基本使用
使用介绍
前端使用WebSocket通常需要使用浏览器提供的WebSocket API，该API可以通过JavaScript代码与WebSocket服务器建立连接，并在连接建立后进行数据传输。
第一步
创建一个WebSocket对象。可以使用以下代码创建一个WebSocket对象：
const socket = new WebSocket('ws://localhost:8080'); 在创建WebSocket对象时，需要传递WebSocket服务器的地址和端口号作为参数。WebSocket服务器地址可以使用ws://或wss://前缀表示，ws://表示使用普通的HTTP协议进行通信，wss://表示使用加密的HTTP协议进行通信。
第二步
监听WebSocket事件。WebSocket API提供了几种事件类型，可以通过这些事件来处理WebSocket的连接状态和数据传输。下面是常用的事件类型：
open：WebSocket连接成功时触发。message：接收到WebSocket服务器发送的消息时触发。error：WebSocket连接出错时触发。close：WebSocket连接关闭时触发。
可以使用下面的代码监听WebSocket事件：
socket.addEventListener('open', (event) => {console.log('WebSocket连接已打开');
});socket.addEventListener('message', (event) => {console.log('接收到消息：', event.data);
});socket.addEventListener('error', (event) => {console.log('WebSocket连接出错：', event);
});socket.addEventListener('close', (event) => {console.log('WebSocket连接已关闭');
});
第三步
发送数据。可以使用WebSocket.send()方法向WebSocket服务器发送数据。该方法接受一个字符串或一个二进制数据对象作为参数。下面是一个例子：
这里需要注意的是如果传输的数据为对象格式，应转换为JOSN格式进行传输。
socket.send('Hello, WebSocket!');
第四步
关闭连接。可以使用WebSocket.close()方法关闭WebSocket连接。
socket.close();
常用API介绍
WebSocket(url[, protocols])
创建WebSocket对象。其中，url参数是WebSocket服务器的地址，protocols参数是一个可选的字符串或字符串数组，表示WebSocket协议的子协议列表。(见使用介绍第一步)
WebSocket.readyState
WebSocket对象的只读属性，表示当前WebSocket的连接状态，它的值为下面四个之一：
- 0 - 表示WebSocket连接尚未建立。
- 1 - 表示WebSocket连接已建立，可以进行通信。
- 2 - 表示WebSocket连接正在关闭。
- 3 - 表示WebSocket连接已经关闭或者连接不能打开。
console.log(this.webSocket.readyState)WebSocket.send(data)
向WebSocket服务器发送数据。其中，data参数可以是一个字符串、一个二进制数据对象或者一个Blob对象。(见使用介绍第三步)
WebSocket.close([code[, reason]])
关闭WebSocket连接。其中，code参数表示关闭代码，reason参数表示关闭原因。(见使用介绍第四步)
WebSocket.bufferedAmount
WebSocket的bufferedAmount属性表示已经被send()方法发送但还没有被发送到网络层的数据量。在发送数据的过程中，如果发送的数据量大于WebSocket的缓冲区大小，那么这些数据就会被暂时保存在WebSocket的缓冲区中，直到网络层可以接受这些数据时再发送出去。
const socket = new WebSocket('ws://localhost:8080');
console.log('初始bufferedAmount：', socket.bufferedAmount);
socket.send('Hello, WebSocket!');
console.log('发送后bufferedAmount：', socket.bufferedAmount);
WebSocket.extensions
WebSocket的extensions属性是一个只读属性，它表示WebSocket服务器支持的扩展列表。
const socket = new WebSocket('ws://localhost:8080');
console.log('WebSocket服务器支持的扩展：', socket.extensions);
WebSocket.binaryType
WebSocket的binaryType属性表示在收到二进制数据时使用的编码方式，默认值是"blob"。可以将其设置为"arraybuffer"来使用ArrayBuffer对象来处理二进制数据。
const socket = new WebSocket('ws://localhost:8080');
socket.binaryType = 'arraybuffer';
socket.addEventListener('message', (event) => {const arrayBuffer = event.data;// 处理二进制数据
});
三、Websocket的封装
vue代码
import Vue from 'vue'
import { Message } from 'element-ui'
let v = new Vue()
v.$message = Message;
var webSocket = null;
var isConnect = false; //连接状态
var globalCallback = function(e){ console.log(e) };//定义外部接收数据的回调函数
var reConnectNum = 0;//重连次数var websocketUrl = process.env.VUE_APP_API_WEBSOCKET_URL;//心跳设置
var heartCheck = {heartbeatData:{DevID:{value:Vue.ls.get('devid')},DevHeart:{value:"1"} },//心跳包timeout: 60 * 1000, //每段时间发送一次心跳包 这里设置为60sheartbeat: null, //延时发送消息对象（启动心跳新建这个对象，收到消息后重置对象）start: function () {this.heartbeat = setInterval(()=>{if (isConnect){webSocketSend(this.heartbeatData);}else{this.clear();}}, this.timeout);},reset: function () {clearInterval(this.heartbeat);this.start();},clear:function(){clearInterval(this.heartbeat);}
}//初始化websocket
function initWebSocket(callback) {//此callback为在其他地方调用时定义的接收socket数据的函数if(callback){if(typeof callback == 'function'){globalCallback = callback }else{throw new Error("callback is not a function")}}if ("WebSocket" in window) {webSocket = new WebSocket(websocketUrl);//创建socket对象} else {Message({message: '该浏览器不支持websocket!',type: 'warning'});return}//打开webSocket.onopen = function() {webSocketOpen();};//收信webSocket.onmessage = function(e) {webSocketOnMessage(e);};//关闭webSocket.onclose = function(e) {webSocketOnClose(e);};//连接发生错误的回调方法webSocket.onerror = function(e) {webSocketonError(e);};
}//连接socket建立时触发
function webSocketOpen() {console.log("WebSocket连接成功");//首次握手webSocketSend(heartCheck.heartbeatData);isConnect = true;heartCheck.start();reConnectNum = 0;
}//客户端接收服务端数据时触发,e为接受的数据对象
function webSocketOnMessage(e) {console.log("websocket信息:");console.log(e.data)const data = JSON.parse(e.data);//根据自己的需要对接收到的数据进行格式化globalCallback(data);//将data传给在外定义的接收数据的函数，至关重要。
}//socket关闭时触发
function webSocketOnClose(e){heartCheck.clear();isConnect = false; //断开后修改标识console.log(e)console.log('webSocket已经关闭 (code：' + e.code + ')')//被动断开，重新连接if(e.code == 1006){if(reConnectNum < 3){initWebSocket();++reConnectNum;}else{v.$message({message: 'websocket连接不上，请刷新页面或联系开发人员!',type: 'warning'});}}
}//连接发生错误的回调方法
function webSocketonError(e){heartCheck.clear();isConnect = false; //断开后修改标识console.log("WebSocket连接发生错误:");console.log(e);
}//发送数据
function webSocketSend(data) {webSocket.send(JSON.stringify(data));//在这里根据自己的需要转换数据格式
}
//在其他需要socket地方主动关闭socket
function closeWebSocket(e) {webSocket.close();heartCheck.clear();isConnect = false;reConnectNum = 0;
}
//在其他需要socket地方接受数据
function getSock(callback) {globalCallback = callback
}
//在其他需要socket地方调用的函数，用来发送数据及接受数据
function sendSock(agentData) {//下面的判断主要是考虑到socket连接可能中断或者其他的因素，可以重新发送此条消息。switch (webSocket.readyState) {//CONNECTING：值为0，表示正在连接。case webSocket.CONNECTING:setTimeout(function() {sendSock(agentData, callback);}, 1000);break;//OPEN：值为1，表示连接成功，可以通信了。case webSocket.OPEN:webSocketSend(agentData);break;//CLOSING：值为2，表示连接正在关闭。case webSocket.CLOSING:setTimeout(function() {sendSock(agentData, callback);}, 1000);break;//CLOSED：值为3，表示连接已经关闭，或者打开连接失败。case webSocket.CLOSED:// do somethingbreak;default:// this never happensbreak;}
}export default {initWebSocket,closeWebSocket,sendSock,getSock
};
vue方法来自于这位大佬的文章，以下是链接。websocket封装_Paul_Chan_的博客-CSDN博客websocket封装https://blog.csdn.net/weixin_43422861/article/details/114259139?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522168336616716782425125574%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=168336616716782425125574&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~baidu_landing_v2~default-1-114259139-null-null.142%5Ev86%5Einsert_down28,239%5Ev2%5Einsert_chatgpt&utm_term=websocket%E5%B7%A5%E5%85%B7%E5%B0%81%E8%A3%85&spm=1018.2226.3001.4187
react代码
import React, { Component } from 'react';class WebSocketHelper extends Component {constructor(props) {super(props);this.state = {websocket: null,heartBeatIntervalId: null,};}componentDidMount() {this.connectWebSocket();}componentWillUnmount() {this.closeWebSocket();}connectWebSocket = () => {const websocket = new WebSocket(this.props.url);websocket.onopen = () => {console.log('WebSocket connection opened.');this.props.onOpen && this.props.onOpen();if (this.props.heartBeatInterval) {const heartBeatIntervalId = setInterval(() => {console.log('Sending WebSocket heartbeat.');this.sendMessage(this.props.heartBeatMessage);}, this.props.heartBeatInterval);this.setState({ heartBeatIntervalId });}};websocket.onclose = () => {console.log('WebSocket connection closed.');this.props.onClose && this.props.onClose();if (this.state.heartBeatIntervalId) {clearInterval(this.state.heartBeatIntervalId);this.setState({ heartBeatIntervalId: null });}setTimeout(() => {console.log('Attempting to reconnect WebSocket.');this.connectWebSocket();}, this.props.reconnectInterval || 5000);};websocket.onerror = (error) => {console.error('WebSocket error:', error);this.props.onError && this.props.onError(error);};websocket.onmessage = (event) => {console.log('WebSocket message received:', event.data);this.props.onMessage && this.props.onMessage(event.data);};this.setState({ websocket });}closeWebSocket = () => {if (this.state.websocket) {this.state.websocket.close();console.log('WebSocket connection closed.');if (this.state.heartBeatIntervalId) {clearInterval(this.state.heartBeatIntervalId);this.setState({ heartBeatIntervalId: null });}}}sendMessage = (message) => {if (this.state.websocket) {console.log('Sending WebSocket message:', message);this.state.websocket.send(message);}}render() {return this.props.render({sendMessage: this.sendMessage,closeWebSocket: this.closeWebSocket,});}
}export default WebSocketHelper;
使用
import React from 'react';
import WebSocketHelper from './WebSocketHelper';function App() {const handleOpen = () => {console.log('WebSocket connection opened.');};const handleClose = () => {console.log('WebSocket connection closed.');};const handleError = (error) => {console.error('WebSocket error:', error);};const handleMessage = (message) => {console.log('WebSocket message received:', message);};const handleRender = ({ sendMessage, closeWebSocket }) => {// 这里可以使用 sendMessage 和 closeWebSocket 方法return (<div><button onClick={() => sendMessage('Hello WebSocket!')}>Send Message</button><button onClick={() => closeWebSocket()}>Close WebSocket</button></div>);};return (<WebSocketHelperurl="wss://example.com"onOpen={handleOpen}onClose={handleClose}onError={handleError}onMessage={handleMessage}render={handleRender}/>);
}export default App;
更多详细信息详见官网：https://www.websocket.org/
https://www.websocket.org/
