文档章节

Dva 中使用 WebSocket

dkvirus
 dkvirus
发布于 2018/05/28 16:25
字数 840
阅读 2.2K
收藏 7

一、概述

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) 解析成对象。

二、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/>
      );
  }
}

三、一直连接 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 中添加上述代码即可。

© 著作权归作者所有

dkvirus
粉丝 58
博文 125
码字总数 122513
作品 0
六安
程序员
私信 提问
【译】 WebSocket 协议第十二章——使用其他规范中的WebSocket协议

概述 本文为 WebSocket 协议的第十二章,本文翻译的主要内容为如何使用其他规范中的 WebSocket 协议。 有兴趣了解该文档之前几章内容的同学可以见: 【译】WebSocket 协议——摘要( Abstra...

黄Java
2019/02/19
0
0
八问WebSocket协议:为你快速解答WebSocket热门疑问

本文由“小姐姐养的狗”原创发布于“小姐姐味道”公众号,原题《WebSocket协议 8 问》,收录时有优化和改动。感谢原作者的分享。 一、引言 WebSocket是一种比较新的协议,它是伴随着html5规范...

JackJiang2011
2019/04/25
0
0
实时通信技术之websocket

本文章即从4个方面带大家了解websocket: websocket是什么? 为什么需要 WebSocket ? websocket的优点与缺点? websocket的相关使用(客户端与服务器端)? websocket的相关协议与规范? 一...

一看就喷亏的小猿
2018/11/03
1.2K
2
Cocos2d-x v3.x 官方文档]C++版如何使用WebSocket

在C++中使用 详细代码可参考引擎目录下的/samples/Cpp/TestCpp/Classes/ExtensionsTest/NetworkTest/WebSocketTest.cpp文件。 头文件中的准备工作 首先需要include WebSocket的头文件。 #inc...

droideep
2014/07/14
246
0
Spray.io搭建Rest — 支持WebSocket

Spray.io尝试 使用Spray.io搭建Rest服务 Spray.io搭建Rest — 支持Twirl模板并部署 Spray.io搭建Rest — 支持WebSocket Spray.io搭建Rest — 支持WebSocket 工程地址:http://git.oschina.ne...

ForEleven
2014/04/30
2K
3

没有更多内容

加载失败,请刷新页面

加载更多

mysql中int(11)的列大小是多少?

mysql中int(11)的列大小是多少? 以及可以在此列中存储的最大值? #1楼 mysql中int(11)的列大小是多少? (11) int数据类型的此属性与列的大小无关。 它只是整数数据类型的显示宽度。 从11....

技术盛宴
26分钟前
19
0
聊聊artemis消息的推拉模式

序 本文主要研究一下artemis消息的推拉模式 拉模式 receive activemq-artemis-2.11.0/artemis-jms-client/src/main/java/org/apache/activemq/artemis/jms/client/ActiveMQMessageConsumer.......

go4it
36分钟前
39
0
vue 全局前置守卫引起死循环的原因与解决方法

我们经常会用到全局前置守卫,如判断用户有没有登陆过,如果登陆过就直接跳到目的页面,如果没有登陆过,就跳转到登陆页。 先看官网对全局前置守卫的介绍 使用 router.beforeEach 注册一个全...

tianyawhl
47分钟前
31
0
如何按索引从std :: vector <>擦除元素?

我有一个std :: vector <int>,我想删除第n个元素。 我怎么做? std::vector<int> vec;vec.push_back(6);vec.push_back(-17);vec.push_back(12);vec.erase(???); #1楼 erase方法将以两......

javail
今天
43
0
使用生成器模拟时间分片

对于cpu密集型任务, 时间分片可以有效减少页面卡顿, 不过对于纯计算型任务还是推荐使用worker在后台做计算 效果图, 计算密集型任务被分到每次只执行16ms, 每次执行完毕留给浏览器时间去响应事...

阿豪boy
今天
63
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部