实时数据推送webSocket
实时数据推送
在Web或移动项目中，服务器向客户端实时推送消息是一种常见的业务需求。
实现方式
- Polling：轮询（俗称“拉”），即定期重新请求数据。
- Long-Polling：长轮询，是 Polling 技术的改进，即在保持住一个请求，在这个请求内不断发送数据。
- 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.4Windows 等其他环境可以直接下载安装包或自行百度
Mac下安装 yarn推荐：
$ brew install yarn
$ yarn -v
1.5.1Windows 等其他环境可以直接下载安装包或自行百度
安装 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.jsWebsocket 客户端
$ 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-namespacesubscribeToTimer 用于向服务器发一个消息请求数据
当请求到数据以后调用回调函数 cb
启动
$ yarn start即可看到自动打开浏览器 http://localhost:3000/ 并显示如下内容，其中时间部分会不断收到服务端数据进行刷新
This is the timer value: 2018-03-07T12:40:35.613Z
原文：https://segmentfault.com/a/1190000013588737实时数据推送webSocket的更多相关文章
- C# ASP.NET MVC 之 SignalR 学习 实时数据推送显示 配合 Echarts 推送实时图表
本文主要是我在刚开始学习 SignalR 的技术总结,网上找的学习方法和例子大多只是翻译了官方给的一个例子,并没有给出其他一些经典情况的示例,所以才有了本文总结,我在实现推送简单的数据后,就想到了如何 ...
- kafka和websocket实时数据推送
需求 已有Kafka服务,通过kafka服务数据(GPS)落地到本地磁盘(以文本文件存储).现要根据echarts实现一个实时车辆的地图. 分析 前端实时展现:使用websocket技术,实现服务 ...
- C# 数据推送 实时数据推送 轻量级消息订阅发布 多级消息推送 分布式推送
前言 本文将使用一个NuGet公开的组件技术来实现数据订阅推送功能,由服务器进行推送数据,客户端订阅指定的数据后,即可以接收服务器推送过来的数据,包含了自动重连功能,使用非常方便 nuget地址:ht ...
- swoole+Redis实现实时数据推送
<?php /** * *************************************** * 单进程保护 * * ********************************* ...
- 使用Node.js实现数据推送
业务场景:后端更新数据推送到客户端(Java部分使用Tomcat服务器). 后端推送数据的解决方案有很多,比如轮询.Comet.WebSocket. 1. 轮询对于后端来说开发成本最低,就是按照传统的 ...
- javascript之数据推送
我们使用ajax与后台服务进行交互,常常是通过触发事件来单次交互,但对于有些web应用来说,需要前台与后台保持长连接,前端不定时地接收后台推送的数据信息, 例如:股票行情分析.聊天室和网页在线游戏等. ...
- SSE技术详解：使用 HTTP 做服务端数据推送应用的技术
SSE ( Server-sent Events )是 WebSocket 的一种轻量代替方案,使用 HTTP 协议. 严格地说,HTTP 协议是没有办法做服务器推送的,但是当服务器向客户端声明接下来 ...
- 理解HTML5数据推送应用开发问题
一.数据推送 SSE是一种允许服务端向客户端推送新数据(通常称作数据推送)的HTML5技术.那么,究竟什么是数据推送?它与我们可能用过的其他技术有什么不同呢? 让我先来回答什么不是数据推送.数据推送有 ...
- 基于socket.io的实时消息推送
用户访问Web站点的过程是基于HTTP协议的,而HTTP协议的工作模式是:请求-响应,客户端发出访问请求,服务器端以资源数据响应请求. 也就是说,服务器端始终是被动的,即使服务器端的资源数据发生变化, ...
随机推荐
- AI-Web1靶机渗透
先上一张图: 靶机信息及地址:https://www.vulnhub.com/entry/ai-web-1,353/ 下载到靶机后,在VMware里打开,kali使用arp-scan -l 扫到 在浏 ...
- pip方式安装Jupyter
pip方式安装Jupyter 如你的cmd命令窗口无法识别pip命令,请配置下环境变量(将python的''Scripts''文件夹路径添加至''path''变量里面). 使用以下命令更新pip和安装 ...
- 手把手教你避开组件cover-view的那些坑
腾讯位置服务基于微信提供的小程序插件能力,专注于(围绕)地图功能,打造一系列小程序插件,可以帮助开发者简单.快速的构建小程序,是您实现地图功能的最佳伙伴.目前微信小程序插件提供路线规划.地铁图.地图选 ...
- 【Gradle】Android Gradle 多项目构建
Android Gradle 多项目构建 Android 项目区别 Android项目一般分为库项目,应用项目,测试项目,Android Gradle 根据这些项目分别对应3种插件:com.andro ...
- Checklist for an RMAN Restore (Doc ID 1554636.1)
Checklist for an RMAN Restore (Doc ID 1554636.1) APPLIES TO: Oracle Database - Enterprise Edition - ...
- CodeForces - 1230C（思维/暴力）
题意 https://vjudge.net/problem/CodeForces-1230C 给了你总共有21张多米诺骨牌,每张牌有两个面,然后给你一个无向图,保证没有环和一个顶点多条边的情况存在.现 ...
- 手机号码生成器app有吗，怎么使用的呢？
手机号码生成器app是有的,他有手机号码生成器安卓版,也有手机号码生成器苹果版的.很多人会误解他的功能以为是拿来生成号码来接验证码的,其实他不是拿来接短信的.它是用来给别人做营销找客沪的找客源的,接不 ...
- 201871010123-吴丽丽 《面向对象程序设计（Java）》第十六周学习总结
201871010123-吴丽丽 <面向对象程序设计(Java)>第十六周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...
- Noip2016Day1T2 天天爱跑步
题目链接 problem solution 这是一道一个顶六个的好题!!! 说一下各档部分分怎么写吧. 先看一下\(S_i=1\)和\(T_i=1\)的部分分怎么写. 如果\(S_i=1\) 当且仅当 ...
- 向技术领先的华为说No，就是对国家的通信前景说No！
历史已经证明了,任何一项可以加速人员.物资.能源.金钱.信息迁移的技术,都会让社会原有的生产力成倍地增长.中国在互联网.移动互联网保持令整个世界震惊的飞速发展,以BAT为首的诸多商业帝国建立,还有人们 ...