Dva 中使用 WebSocket

1、概述

Websocket 是 H5 自带的一个 API，随着愈来愈多的浏览器都自适应了 H5 的特性，许多浏览器也内置了 WebSocket API。也就是说 WebSocket 和 window、document 同样做为全局变量能够直接使用。

要在浏览器端使用 WebSocket，首先须要服务端支持 WebSocket，假设如今服务端已提供 WebSocket 服务，访问地址：ws://localhost:8080，简单介绍下浏览器使用方法。

// 链接 Websocket 服务端
const ws = new WebSocket("ws://localhost:8080");

// 监听链接上 Websocket 服务端触发事件
ws.onopen = function (e) {
  console.log('链接上 ws 服务端了');
  // ws.send() 给服务端发送数据
  ws.send('我是客户端，我接收到你的请求了');
}

// 监听 Websocket 服务端传来消息触发事件
ws.onmessage = function(msg) { 
    // msg.data 接收服务端传递过来的数据
    console.log('接收服务端发过来的消息: %o', msg.data); 
}; 

// 监听 Websocket 服务端链接断开触发事件
ws.onclose = function (e) {
    console.log('ws 链接关闭了');
}

注意事项： WebSocket 通讯传递的数据是字符串，即使浏览器端传给服务端的是个对象，在服务端接收时也会变成字符串，能够经过 JSON.parse(msg.data) 解析成对象。

2、dva 中使用 WebSocket

下面是我写小说爬虫用到的部分代码，点击爬取，在浏览器端打印服务端爬虫日志。

dva 是基于 React 的状态管理器，不能直接对 Dom 进行操做。要持续不断的接收服务端响应数据，须要在构造器中定义一个 state 属性进行接收。直接在 routes 目录下的页面中链接服务端 WebSocket 并调用 API 接口。

（用箭头函数写组件的写法是没有 state 特性的，这一点在 React 官方文档中有详细说明，具体可参考 React 开发中不得不注意的两个大坑）

// src/routes/novel/index.js
class NovelComp {
  constructor (props) {
    super(props);
    this.state = { result: '' };   // 接收 Websocket 响应数据
  }

  handleSteal (flag) {
    const ws = new WebSocket('ws://localhost:8080');
    let result = this.state.result;

    ws.onopen = function (e) {
      console.log('链接上 ws 服务端了');
      ws.send(JSON.stringify({ flag: flag, data: currentItem }));
    }
    ws.onmessage = function(msg) { 
        console.log('接收服务端发过来的消息: %o', msg); 
        result += msg.data + '\n'; 
        that.setState({ result: result });
    }; 
    ws.onclose = function (e) {
        console.log('ws 链接关闭了');
    }
  }

  render () {
      return (
        <Modal>
          <Button></Button>
          ....  
        <Modal/>
      );
  }
}

3、一直链接 WebSocket

上面的 WebSocket 应用场景是点击按钮才会链接 WebSocket，关闭模态框 WebSocket 链接即断开。

有些需求须要 WebSocket 一直链接，好比 待办事项主动提醒。若是其它操做新增了一条通知，当前用户的通知条目应当自动变成 6，而不是下一次刷新完再更新。

因为 dva 自己的特性，若是刷新页面，dva 全部状态容器中的值都会清空，与此同时 WebSocket 链接也会断开，也就无法监听服务端传过来的数据。

解决方案： 修改 src/models/novel.js 的 subscriptions 属性。

subscriptions: {
    setupHistory ({ dispatch, history }) {
      history.listen((location) => {
        if (location.pathname.indexOf('reptile/novel')) {
           const ws = new WebSocket('ws://localhost:8080');
           dispatch({
              type: 'updateState', 
              payload: { ws: ws },
           });
        }
      })
    },
  },

subscriptions 下面 setupHistory 的做用是监听浏览器地址栏地址若是变成当前页面 reptile/novel 就建立 WebSocket 链接，这样就能保证每次进入这个页面的时候都已链接 WebSocket。

对于 待办事项主动提醒 那个需求，只需在布局文件中的 subscriptions 中添加上述代码便可。