websocket入门一条龙，基础封装与使用（代码开箱即用）

Posted 2021-08-20 你下节啥课

文章目录

• 前言
• WebSocket相关
• • 1. 构造函数
  • 2. 常用属性
• websocket封装
• 使用方式
• 补充

前言

Websocket是一种用于在服务器和客户端之间实现高效的双向通信的机制，通过WebSocket，其目的是在应用和服务器进行频繁双向通信时，可以使服务器避免打开多个HTTP连接进行工作来节约资源，提高了工作效率和资源利用率。

WebSocket相关

1. 构造函数

WebSocket(url,protocols)构造函器会返回一个 WebSocket 对象。

url指WebSocket服务器将响应的URL。
protocols可选字段，代表选择的子协议。

2. 常用属性

• WebSocket.url是一个只读属性，对应构造函数创建WebSocket实例对象时的URL。
• WebSocket.readyState返回当前WebSocket 的链接状态，只读。对应值为整型，如下：
  • 0 (WebSocket.CONNECTING) 正在链接中
  • 1 (WebSocket.OPEN) 已经链接并且可以通讯
  • 2 (WebSocket.CLOSING) 连接正在关闭
  • 3 (WebSocket.CLOSED) 连接已关闭或者没有链接成功
• WebSocket.onopen属性定义建立连接并可以通讯时触发的回调函数，也就是readyState 变为1时调用;
• WebSocket.onmessage该属性定义一个当收到来自服务器的消息时触发的回调函数。
• WebSocket.onerror定义一个发生错误时执行的回调函数，此事件的事件名为"error"。
• WebSocket.onclose属性返回一个事件监听器，这个事件监听器将在 WebSocket 连接的readyState 变为3时被调用。

websocket封装

websocket.js代码如下：

/* websocket.js */
// 判断字符串是否是JSON格式
function isJSON(str) {
  if (typeof str === 'string') {
    try {
      const obj = JSON.parse(str);
      if (typeof obj === 'object' && obj) {
        return true;
      }
      return false;
    } catch (e) {
      console.log('error：' + str + '!!!' + e);
      return false;
    }
  }
  return false;
}
class Socket {
  /**
   * 构造函数
   * @param {object} params 构造函数参数
   */
  constructor(params) {
    window.WebSocket = window.WebSocket || window.MozWebSocket;
    if (!window.WebSocket) { // 检测浏览器支持
      console.error('错误: 浏览器不支持websocket');
      return;
    }
    this.websocket = null;
    this.params = params;
    this.socketInit(params);
  }

  /**
   * 初始化socket
   * @param {string}   url     WebSocket服务器将响应的URL,必传。
   * @param {function} onopen  open事件的回调函数
   * @param {function} onclose close事件的回调函数
   * @param {function} onerror error事件的回调函数
   * @param {function} onclose close事件的回调函数
   */
  socketInit({
    url, onopen, onmessage, onerror, onclose,
  }) {
    if (url !== undefined) {
      this.websocket = new WebSocket(url);
      // 用于指定连接成功后的回调函数。
      this.websocket.onopen = (e) => {
        console.log('连接成功', e);
        if (typeof onopen === 'function') {
          onopen(e);
        }
      };
      // 用于指定当从服务器接受到信息时的回调函数。
      this.websocket.onmessage = (e) => {
        console.log('接收数据', e);
        if (typeof onmessage === 'function') {
          const res = isJSON(e.data) ? JSON.parse(e.data) : e.data;
          onmessage(res);
        }
      };
      // 用于指定连接关闭后的回调函数。
      this.websocket.onclose = (e) => {
        console.log('连接关闭', e);
        if (typeof onclose === 'function') {
          onclose(e);
        }
      };
      // 用于指定连接失败后的回调函数。
      this.websocket.onerror = (e) => {
        console.log('连接异常', e);
        if (typeof onerror === 'function') {
          onerror(e);
        }
      };
    }
  }

  // 发送消息
  send(message) {
    // readyState 1 表示已经链接并且可以通讯
    if (!this.websocket || this.websocket.readyState !== 1) {
      console.log('请确认websocket是否已经链接并且可以通讯');
      return;
    }
    this.websocket.send(JSON.stringify(message));
  }

  // 手动关闭socket
  close() {
    if (!this.websocket) {
      console.log('websocket 不可用');
      return;
    }
    this.websocket.close();
  }
}
export default Socket;

使用方式

代码如下（示例）：

import Socket from '@/utils/websocket';

let websocket;
const params = {
  url: 'ws://127.0.0.1:8081',
  onopen: () => {
  	// 建立连接时发送相关数据 
  	const token = "xxxx"
  	websocket.send(token);
  },
  onmessage: (res) => {
    // 接收数据后的业务代码
  },
  onclose: () => {
    // 连接关闭时触发的回调函数
  },
};
websocket = new Socket(params);

业务处理完可以手动关闭连接

websocket.close();

补充

可先用websocket在线测试工具测试服务器是否联通。封装代码易扩展，后续还可添加保活、重连功能。