websocket 方法

在使用 websocket 方法之前需引入相应的文件。

import websocket from 'utils/webSoket';

initWebSocket

• 初始化WebSocket
• WebSocket的 url 为环境变量的 WEBSOCKET_URL 拼接accessToken, 链接地址为平台服务，示例地址ws://xxx.saas.hand-china.com/hpfm/websocket
• 心跳重连时间为 45s

示例

   import webSocketManager from 'utils/webSoket';
   class ComponentA extends React.Component {
 
     componentDidMount() {
       webSocketManager.initWebSocket();
     }
 
   }

若前端请求使用了nginx转发，需要为nginx添加配置，支持ws请求

wss协议

# 实际websocket服务器地址
upstream wss_svr {
    server 172.16.0.1:3000;  
}
 
# 443 ssl端口配置，实际websockets（wss）地址
server {
 
    listen 2000;
    server_name my.server.com;
		
    ssl on;
 
    # 自己的证书，放在与nginx.conf同一文件夹下。（若放不同文件夹注意路径问题）
    ssl_certificate /www/my.server.pem;
    ssl_certificate_key /www/my.server.key;
		
    ssl_session_timeout 5m;
    ssl_session_cache shared:SSL:10m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2 SSLv2 SSLv3;
    ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP;
    ssl_prefer_server_ciphers on;
    ssl_verify_client off;
		
    location / {		
        proxy_redirect off;
        proxy_pass http://wss_svr;      # 转发
        proxy_set_header Host $host;
        proxy_set_header X-Real_IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr:$remote_port;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;   # 升级协议头
        proxy_set_header Connection upgrade;
    }		
}

ws协议

# 实际websocket服务器地址
upstream wss_svr {
    server 172.16.0.79:3000;  
}
 
# 443 ssl端口配置，实际websockets（wss）地址
server {
 
    listen 2000;
    server_name my.server.com;
			
    location / {		
        proxy_redirect off;
        proxy_pass http://wss_svr;      # 转发
        proxy_set_header Host $host;
        proxy_set_header X-Real_IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr:$remote_port;
    }
		
}

addListener

• 用于添加监听事件
• 在WebSocket收到来自服务器的消息时会触发相应监听事件
• 如果配置的是以 ws 开头, 则使用原生 否则使用 sockjs

参数

[type]（String）：监听事件类型，类型应为WebSocket监听到的消息数据的 ${res.service}:${res.key}

[handler]（Function）：回调函数，回调函数的第一个参数是监听到的实际消息

示例

   import webSocketManager from 'utils/webSoket';
   class ComponentA extends React.Component {
 
     componentDidMount() {
       webSocketManager.initWebSocket();
       webSocketManager.addListener('hzero-message:hzero-web', messageData => {
      const { message } = messageData;
      const messageJson = isEmpty(message) ? undefined : JSON.parse(message);
      if (!isEmpty(messageJson)) {
        saveNotices({ message });
      }
    });
     }
 
   }

removeListener

• 用于移除对应监听事件

参数

[type]（String）：监听事件类型

[handler]（Function）：回调函数

示例

   import webSocketManager from 'utils/webSoket';
   class ComponentA extends React.Component {


     componentWillUnmount() {
       webSocketManager.removeListener('hzero-message:hzero-web', this.handleMessage);
     }
 
   }

removeAllListeners

• 用于移除所有监听事件

示例

   import webSocketManager from 'utils/webSoket';
   class ComponentA extends React.Component {


     componentWillUnmount() {
       webSocketManager.removeAllListeners();
     }
 
   }

destroyWebSocket

• 用于关闭 WebSocket

示例

   import webSocketManager from 'utils/webSoket';
   class ComponentA extends React.Component {


     componentWillUnmount() {
       webSocketManager.destroyWebSocket();
     }
 
   }