ws-sdk的使用方式

使用

通过安装包的方式引入。

import Socket from '@xxx/ws-sdk';

业务接入

通过new创建一个Socket对象实例的方式使用。

1. 登录成功建立连接
2. 建立连接之后，收到消息，处理消息
3. 退登主动断开连接

// 登录成功建立连接
const { code, data } = await login({ data: { ...loginParam } });
if (code === 1 && data) {
  const { userInfo, socketVO } = data;
  const { token, keyIv, keyValue } = socketVO;
  const { tenantId, id } = userInfo;
  const configs = {
    tenantId,
    id,
    keyValue,
    keyIv,
    token,
  };
  localStorage.SOCKETCONFIG = JSON.stringify({
    ...configs,
  });
  // 建立连接
  connect({
    ...configs,
  });
}

// socket.ts 统一处理socket回调
import Utils from './events';
import { getToken } from '@/services/loginService';

import Socket from '@xmt/ws-sdk';

const { Listener } = Utils;
let keyIvPre: any;
let ws: any = null;
let timer: any = 0;
// 解析消息体
const parseMsg = (data: any = {}) => {
  const { actionType, payload, timestamp } = data;
  if (actionType === 3) {
    // 下行消息处理
    try {
      const params = JSON.parse(payload);
      const { actionType } = params;
      if (actionType !== 1) {
        // 小红点消息提醒
        Listener.broadcast('listenMsg', true);
      }
      if (actionType !== 2) {
        // 全局气泡通知
        console.log(params);
        Listener.broadcast('listenTooltip', { ...params, timestamp });
      }
    } catch (e: any) {
      // console.log('消息体解析报错=========', e.message);
    }
  }
};
// 获取host
const getHost = () => {
  const host = location.host.split('.xxx')[0];
  let env = '';
  if (host.includes(':800')) {
    // 本地环境
    env = '-daily';
  } else if (host.includes('-pre')) {
    env = '-pre';
  } else if (host.includes('-daily')) {
    env = '-daily';
  } else if (host.includes('-dev')) {
    env = '-dev';
  }
  return `wss://wss${env}.xiaomantuo.cn`;
};
// 建连
const connect = (data?: any) => {
  if (!getToken()) {
    return;
  }
  if (ws) {
    // 先断开之前的链接
    ws.close();
  }
  let params = data;
  if (!data) {
    params = JSON.parse(localStorage.SOCKETCONFIG || '{}');
  }
  const { tenantId, id, keyValue, keyIv, token } = params;
  keyIvPre = keyIv;
  ws = new Socket({
    url: getHost(),
    application: {
      osType: 1,
      deviceToken: token,
    },
    keyValue,
    keyIv,
    auth: {
      token,
      tenantId,
      keyId: 1,
      userId: id,
      terminal: 2, // 车队2 货代1
      userType: 0,
      content: {
        keepAlive: 15,
        accessToken: token,
      },
    },
  });
  // 回调
  ws.onOpen = (e: any) => {
    debugger;
    // console.log('open========');
  };
  ws.onMessage = (res: any) => {
    if (!getToken()) {
      ws?.close?.();
      return;
    }
    // 接收到相关信息之后的逻辑
    parseMsg(res || {});
  };
  ws.onError = () => {
    // keyIv变化后，keyIv不匹配，使用最新keyIv
    const { keyIv } = JSON.parse(localStorage.SOCKETCONFIG || '{}');
    if (keyIvPre === keyIv) {
      return false;
    }
    ws.close();
    timer && clearTimeout(timer);
    timer = setTimeout(() => {
      connect();
    }, 5000);
  };
};
// 断开连接
const disconnect = () => {
  // console.log('断开长链=======');
  ws?.close?.();
};

export { connect, disconnect };

// 退登主动断开连接
const onClick = async (e: any) => {
  switch (e.key) {
    case 'login-out': // 退出登录
      await outLogin();
      disconnect(); //断开连接
      ...
      break;
    default:
      break;
  }
};

配置参数

SOCKETCONFIG

名称	类型	含义
tenantId	long	租户id
id	int	用户id
keyValue	string	密钥（16位字符串）
keyIv	string	密钥（16位字符串）
token	string	登陆后鉴权服务返回的token

API

参数	说明	类型
onOpen	当连接已建立回调	Function(e: Event)
onMessage	接收数据时回调	Function(e: Event)
onClose	客户端主动关闭连接时回调	Function(e: Event)
onError	发生错误时回调	Function(e: Event)
onReconnect	断线重连回调	Function(e: Event)
onMaximum	已达到重新连接的最大次数回调	Function(e: Event)