• websocket 方法


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

    
    import websocket from 'utils/webSoket';
    
    

    initWebSocket

    示例

       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

    参数

    [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

    示例

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