Websocket的基本认识、使用与封装

大聪明码农徐

已于 2023-05-06 18:28:03 修改

阅读量6.1k

点赞数 8

分类专栏： React 文章标签： websocket 前端 react.js vue.js

于 2023-05-06 18:25:06 首次发布

本文链接：https://blog.csdn.net/qq_45799465/article/details/130532631

版权

React 专栏收录该内容

24 篇文章 5 订阅

订阅专栏

WebSocket(url[, protocols])

WebSocket.readyState

WebSocket.send(data)

WebSocket.close([code[, reason]])

WebSocket.bufferedAmount

一、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, //每段时间发送一次心跳包 这里设置为60s
    heartbeat: 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 something
        break;
        default:
        // this never happens
        break;
    }
}

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 (
    <WebSocketHelper
      url="wss://example.com"
      onOpen={handleOpen}
      onClose={handleClose}
      onError={handleError}
      onMessage={handleMessage}
      render={handleRender}
    />
  );
}

export default App;

更多详细信息详见官网：https://www.websocket.org/https://www.websocket.org/