实时数据推送

在Web或移动项目中，服务器向客户端实时推送消息是一种常见的业务需求。

实现方式

  1. Polling：轮询（俗称“拉”），即定期重新请求数据。
  2. Long-Polling：长轮询，是 Polling 技术的改进，即在保持住一个请求，在这个请求内不断发送数据。
  3. WebSocket Polling：是 Long-Polling 技术的改进，即通过HTTP协议握手建立连接后直接进行双向TCP通讯。

应用场景：

  • 聊天室
  • 股票价格变化、K线图
  • 消息提醒

WebSocket Polling

简单点说就是：通过HTTP协议进行握手建立连接后直接进行双向TCP通讯

WebSocket是HTML5新增加的一种通信协议，目前流行的浏览器都支持这个协议，例如 Chrome，Safari，Firefox，Opera，IE等等，对该协议支持最早的应该是Chrome，从Chrome12就已经开始支持，随着协议草案的不断变化，各个浏览器对协议的实现也在不停的更新。该协议还是草案，没有成为标准，不过成为标准应该只是时间问题了。 

SockJS

包装了 WebSocket 之后的高级 API，我们通常不会直接使用 WebSocket 而是使用 SockJS

应对不支持 WebSocket 的场景，如果 WebSocket 不可用，则使用其他协议模拟 WebSocket API。

实验

编程环境

Mac下安装 node.js推荐：

$ brew install node

$ node -v

v6.11.4

Windows 等其他环境可以直接下载安装包或自行百度

https://nodejs.org/en/download/

Mac下安装 yarn推荐：

$ brew install yarn

$ yarn -v

1.5.1

Windows 等其他环境可以直接下载安装包或自行百度

https://yarnpkg.com/lang/en/d...

安装 create-react-app

$ yarn global add create-react-app

之后我们就可以通过 create-react-app 来快速创建 react 项目

HelloWorld

这个程序功能很简单：当客户端通过 Websocket 连接到服务端之后服务端即开始推送数据到客户端

Websocket 服务端

$ cd react/websocket-helloworld

$ mkdir server

$ cd server

安装依赖包

$ yarn add socket.io express

创建文件 app.js

var app = require('express')();

var server = require('http').Server(app);

var io = require('socket.io')(server);

app.get('/', function (req, res) {

  res.sendFile(__dirname + '/public/index.html');

});

io.of('/my-namespace').on('connection', (client) => {

  client.on('subscribeToTimer', (interval) => {

    console.log('client is subscribing to timer with interval ', interval);

    setInterval(() => {

      client.emit('timer', new Date());

    }, interval);

  });

});

const port = 8000;

io.listen(port);

console.log('listening on port ', port);

指定 websocket 的 endpoint 即入口地址为 /my-namespace

然后监听事件 subscribeToTimer

收到事件 subscribeToTimer后开始像客户端定时发送消息timer，消息的数据内容是当前时间

创建文件 public/index.html，这里只是普通的页面展示和 websocket 无关

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <title>React Websocket Demo</title>

  </head>

  <body>

    <h1>React Websocket Demo</h1>

  </body>

</html>

运行

$ node app.js

Websocket 客户端

$ cd react/websocket-helloworld

$ mkdir client

$ cd client

创建 React 项目环境

$ yarn create react-app client

$ cd client

$ rm -rf src/*

创建文件 src/index.js

import React from 'react';

import ReactDOM from 'react-dom';

import { subscribeToTimer } from './api/subscribeToTimer';

class App extends React.Component {

  constructor(props) {

    super(props);

    subscribeToTimer((err, timestamp) => this.setState({

      timestamp

    }));

  }

  state = { timestamp: 'no timestamp yet' }

  render() {

    return (

      <h1>This is the timer value: {this.state.timestamp}</h1>

    );

  }

}

ReactDOM.render(<App />, document.getElementById('root'));

在组件进行构造时即调用 subscribeToTimer 开始请求数据

当收到数据后回调，用 this.setState 改变 React 组件状态从而刷新界面

创建文件 src/api/subscribeToTimer.js

import io from 'socket.io-client';

const socket = io.connect('http://localhost:8000/my-namespace');

function subscribeToTimer(cb) {

  socket.on('timer', timestamp => cb(null, timestamp));

  socket.emit('subscribeToTimer', 1000);

}

export { subscribeToTimer };

指定 websocket 的服务器地址为http://localhost:8000/

指定 websocket 的 endpoint 即入口地址为 /my-namespace

subscribeToTimer 用于向服务器发一个消息请求数据

当请求到数据以后调用回调函数 cb

启动

$ yarn start

即可看到自动打开浏览器 http://localhost:3000/ 并显示如下内容，其中时间部分会不断收到服务端数据进行刷新

 
This is the timer value: 2018-03-07T12:40:35.613Z

原文：https://segmentfault.com/a/1190000013588737

实时数据推送webSocket的更多相关文章

  1. C# ASP.NET MVC 之 SignalR 学习 实时数据推送显示 配合 Echarts 推送实时图表

    本文主要是我在刚开始学习 SignalR 的技术总结,网上找的学习方法和例子大多只是翻译了官方给的一个例子,并没有给出其他一些经典情况的示例,所以才有了本文总结,我在实现推送简单的数据后,就想到了如何 ...

  2. kafka和websocket实时数据推送

    需求 ​ 已有Kafka服务,通过kafka服务数据(GPS)落地到本地磁盘(以文本文件存储).现要根据echarts实现一个实时车辆的地图. 分析 前端实时展现:使用websocket技术,实现服务 ...

  3. C# 数据推送 实时数据推送 轻量级消息订阅发布 多级消息推送 分布式推送

    前言 本文将使用一个NuGet公开的组件技术来实现数据订阅推送功能,由服务器进行推送数据,客户端订阅指定的数据后,即可以接收服务器推送过来的数据,包含了自动重连功能,使用非常方便 nuget地址:ht ...

  4. swoole+Redis实现实时数据推送

    <?php /** * *************************************** * 单进程保护 * * ********************************* ...

  5. 使用Node.js实现数据推送

    业务场景:后端更新数据推送到客户端(Java部分使用Tomcat服务器). 后端推送数据的解决方案有很多,比如轮询.Comet.WebSocket. 1. 轮询对于后端来说开发成本最低,就是按照传统的 ...

  6. javascript之数据推送

    我们使用ajax与后台服务进行交互,常常是通过触发事件来单次交互,但对于有些web应用来说,需要前台与后台保持长连接,前端不定时地接收后台推送的数据信息, 例如:股票行情分析.聊天室和网页在线游戏等. ...

  7. SSE技术详解：使用 HTTP 做服务端数据推送应用的技术

    SSE ( Server-sent Events )是 WebSocket 的一种轻量代替方案,使用 HTTP 协议. 严格地说,HTTP 协议是没有办法做服务器推送的,但是当服务器向客户端声明接下来 ...

  8. 理解HTML5数据推送应用开发问题

    一.数据推送 SSE是一种允许服务端向客户端推送新数据(通常称作数据推送)的HTML5技术.那么,究竟什么是数据推送?它与我们可能用过的其他技术有什么不同呢? 让我先来回答什么不是数据推送.数据推送有 ...

  9. 基于socket.io的实时消息推送

    用户访问Web站点的过程是基于HTTP协议的,而HTTP协议的工作模式是:请求-响应,客户端发出访问请求,服务器端以资源数据响应请求. 也就是说,服务器端始终是被动的,即使服务器端的资源数据发生变化, ...

随机推荐

  1. Display a Detail View with a List View 主子视图-列表视图与详细信息视图同时显示

    In this lesson, you will learn how to display a Detail View together with a List View. For this purp ...

  2. Cesium专栏-空间分析之地形等高线（附源码下载）

    Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...

  3. iPhone每一代的屏幕尺寸比例是多少？

    参考链接: https://www.jianshu.com/p/8f566ce3bc2c https://zhidao.baidu.com/question/1668756575750668747.h ...

  4. Django注意知识点（二）

    Tinymce富文本 前台和后台的使用 一,后台 Admin 1. 于 settings.py 文件中修改 INSTALLED_APPS 2. 于 settings.py 文件中增添如下配置 # 富文 ...

  5. mysql8之坑

    一.具体"坑" 1.修改密码和修改加密方式 mysql> ALTER USER 'root'@'localhost' IDENTIFIED BY '新密码' PASSWORD ...

  6. Python 获 Mozilla 和扎克伯格夫妇 40 余万美金资助

    Python 软件基金会近日发文宣布,收到来自 Mozilla Corporation 和 Chan Zuckerberg Initiative(CZI)的资金赞助,共计 407,000 美元.这笔款 ...

  7. 文件操作NIO

    在丑陋的 Java I/O 编程方式诞生多年以后,Java终于简化了文件读写的基本操作. 两个基本组件 文件或者目录的路径: 文件本身. 这块基本都是些记忆性的东西,没什么过多的需要写的地方,用的时候 ...

  8. Codeforces Round #602 (Div. 2, based on Technocup 2020 Elimination Round 3) D2. Optimal Subsequences (Hard Version) 数据结构 贪心

    D2. Optimal Subsequences (Hard Version) This is the harder version of the problem. In this version, ...

  9. 干货 | 国内互联网公司是如何做微服务实践的？（附PPT下载）

    微服务的概念最早由Martin Fowler与James Lewis于2014年共同提出,并随着Netflix最佳实践的发布而为业界所知.如今,在国内有了大量的微服务实践案例,5月18日,网易云联合云 ...

  10. 新手入门：python的安装（一）

    windows下python的安装 -----因为我是个真小白,网上的大多入门教程并不适合我这种超级超级小白,有时候还会遇到各种各样的问题,因此记录一下我的安装过程,希望大家都能入门愉快,欢迎指教 - ...