实时数据推送

在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. OpenCV:图像的水平、垂直、水平垂直翻转

    首先导入相关的库: import cv2 import matplotlib.pyplot as plt 自定义展示图片的函数: def show(image): plt.imshow(image) ...

  2. 我的第一个CCS工程

    直接用别人已经弄好的例程,学习创建属于自己的工程,就发现还是有很多问题的: 首先是:1. 想加载头文件到include工程文件夹中却发现总是在Document文件夹中,很是纳闷,在网上搜了搜,发现时路 ...

  3. goroutine并发之callback回调

    玩玩 package main import ( "fmt" "strings" "sync" ) var wait sync.WaitGr ...

  4. The 2019 Asia Nanchang First Round Online Programming Contest

    传送门 A. Enju With math problem 题意: 给出\(a_1,\cdots,a_{100}\),满足\(a_i\leq 1.5*10^8\). 现在问是否存在一个\(pos\), ...

  5. LeetCode 5126. 有序数组中出现次数超过25%的元素 Element Appearing More Than 25% In Sorted Array

    地址 https://leetcode-cn.com/contest/biweekly-contest-15/problems/element-appearing-more-than-25-in-so ...

  6. poj 1852 ants 题解《挑战程序设计竞赛》

    地址  http://poj.org/problem?id=1852 题目描述 Description An army of ants walk on a horizontal pole of len ...

  7. ubuntu下使用redshift开启护眼模式

    前面提到flux这东西在一些机器上并不能work,而且也找到了一些关于他不能work的线索(戳这里看原因).根据这些线索我们发现用flux不行了,得换用redshift,那好吧,我们就来装redshi ...

  8. 数据结构与算法-Python/C（目录）

    第一篇 基本概念 01 什么是数据结构 02 什么是算法 03 应用实例-最大子列和问题 第二篇 线性结构 01 线性表及其实现 02 堆栈 03 队列 04 应用实例-多项式加法运算 05 小白专场 ...

  9. golang数据结构之递归解决迷宫问题

    简单来说:递归就是函数/方法自己调用自己,只是每次传入不同的变量. 递归可以解决各种数学问题:n皇后问题.阶乘问题.汉诺塔.迷宫问题.球和篮子问题等等: maze.go package maze im ...

  10. 14-认识DjangoRESTframework

    了解DjangoRESTframework 现在流行的前后端分离Web应用模式,然而在开发Web应用中,有两种应用模式:1.前后端不分离 2.前后端分离. 1.前后端不分离 在前后端不分离中,前端看见 ...