websocket+订阅发布者模式模拟实现股票价格实时刷新
1、新建文件夹
2、文件夹中新建index.html 和 index.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="contain">
<div class="item">
<h5>A1</h5>
<span>100</span>元
</div>
<div class="item">
<h5>B2</h5>
<span>100</span>元
</div>
<div class="item">
<h5>C3</h5>
<span>100</span>元
</div>
<div class="item">
<h5>D4</h5>
<span>100</span>元
</div>
<div class="item">
<h5>E5</h5>
<span>100</span>元
</div>
<button>close</button>
</div>
<script>
var mess = document.querySelector('.contain');
if(window.WebSocket){
var ws = new WebSocket("ws://localhost:8006")
document.querySelector('button').onclick = function(){
ws.close();
}
ws.onopen = function () {
ws.send('getPrice');
}
ws.onclose = function () {
ws.close();
}
ws.onerror = function () {
ws.close();
}
ws.onmessage = function (e) {
var data = JSON.parse(e.data);
var arr = [];
data.current.forEach((value)=>{
arr.push(`<div class="item"><h5>${value.id}</h5><span>${value.price}</span>元</div>`)
})
mess.innerHTML = arr.join('');
}
}
</script>
</body>
</html>
index.js
var ws = require('nodejs-websocket');
var pubSub = {
subscribe:[],
addPub(coon){
this.subscribe.push(coon)
},
pubInfo(data){
this.subscribe.forEach((value)=>{
console.log(value)
value.sendText(data);
})
}
}
var serve = ws.createServer(function (coon) {
coon.on('text',function (str) {
if(str == "getPrice"){
// console.log(coon);
pubSub.addPub(coon)
}
})
coon.on('close',function () {
console.log('close')
})
coon.on('error',function (code) {
console.log('error')
})
}).listen(8006)
function _RandNum() {
return Math.ceil(Math.random() * 100);
}
function getData() {
return JSON.stringify({"current":[
{
id:"A1",
price:_RandNum()
},
{
id:"B2",
price:_RandNum()
},
{
id:"C3",
price:_RandNum()
},
{
id:"D4",
price:_RandNum()
},
{
id:"E4",
price:_RandNum()
}
]})
}
setInterval(()=>{
pubSub.pubInfo(getData());
},2000)
3、文件夹下右键 open in Terminal ，安装 nodejs-websocket
npm install nodejs-websocket
目录下多了文件夹：node_modules
4、在Terminal运行 node index.js
打开页面即可实现页面实时刷新数据。
websocket+订阅发布者模式模拟实现股票价格实时刷新的更多相关文章
- Android 订阅-发布者模式-详解
1.概念简述 Android 简称观察者模式, GoF说道:Observer模式的意图是“定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新”. 有 ...
- websocket实现数据库更新时前端页面实时刷新
websocket实现数据库更新时前端页面实时刷新 javaweb 目录(?)[+] userjsp ManagerServletjava 如题,实现以上功能,我知道主要有两大种思路: 轮询:轮询的原 ...
- C#事件支持发布者/订阅者模式（观察者模式）
C#事件支持发布者/订阅者模式,发布者将事件通知给订阅者,而订阅者在事件发生时调用已经注册好的事件处理函数. public delegate void delUpdate(); //委 ...
- vue双向绑定(数据劫持+发布者-订阅者模式)
参考文献:https://www.cnblogs.com/libin-1/p/6893712.html 实现mvvm主要包含两个方面,数据变化更新视图,视图变化更新数据. 关键点在于data如何更新v ...
- EventBus事件总线框架（发布者/订阅者模式，观察者模式）
一. android应用内消息传递的方式: 1. handler方式-----------------不同线程间传递消息. 2. Interface接口回调方式-------任意两个对象. 3. In ...
- JavaScript 设计模式: 发布者-订阅者模式
JavaScript 设计模式: 发布者-订阅者模式 发布者-订阅者模式 https://github.com/Kelichao/javascript.basics/issues/22 https:/ ...
- 设计模式---订阅发布模式(Subscribe/Publish)
设计模式---订阅发布模式(Subscribe/Publish) 订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象.这个主题对象在自身状态变化时,会通知所有订阅者对象,使 ...
- Kafka下的生产消费者模式与订阅发布模式
原文:https://blog.csdn.net/zwgdft/article/details/54633105 在RabbitMQ下的生产消费者模式与订阅发布模式一文中,笔者以“数据接入”和“事 ...
- Publisher/Subscriber 订阅-发布模式
Publisher/Subscriber 订阅-发布模式 本博后续将陆续整理这些年做的一些预研demo,及一些前沿技术的研究,与大家共研技术,共同进步. 关于发布订阅有很多种实现方式,下面主要介绍WC ...
随机推荐
- SQL Server（五）——常用函数 转
1.数学函数:操作一个数据,返回一个结果 --取上限ceiling select code,name,ceiling(price) from car ; --取下限 floor select floo ...
- linux 安装mysql 5.7
1.下载安装包http://dev.mysql.com/downloads/mysql/#downloads推荐下载通用安装方法的TAR包(http://cdn.mysql.com//Download ...
- [NOIP2012] 摆花
1270. [NOIP2012] 摆花 http://cogs.pro/cogs/problem/problem.php?pid=1270 ★ 输入文件:flower.in 输出文件:flow ...
- 一文搞定 Redis 复制（全会的举个手看看）
阅读本文大概需要 5 分钟. 本文大纲 复制过程 数据间的同步 全量复制 部分复制 心跳 异步复制 总结 一.复制过程 Step 1:从节点执行 slaveof 命令. Step 2:从节点只是保存了 ...
- 1.函数的结构，调用，传参，形参，实参，args,kwargs，名称空间，高阶函数
1.函数的初识 初始函数 获取任意一个字符串的元素的个数 s1='dsjdkjkfefenga' count=0 for i in s1: count+=1 print(count) 获取列表的元素的 ...
- jsp学习与提高（二）——JSP 隐式对象、表单处理及过滤器
1.JSP 隐式对象 JSP隐式对象是JSP容器为每个页面提供的Java对象,开发者可以直接使用它们而不用显式声明.JSP隐式对象也被称为预定义变量. JSP所支持的九大隐式对象: 对象 描述 req ...
- 分享| 语义SLAM的未来与思考（泡泡机器人）
相比典型的点云地图,语义地图能够很好的表示出机器人到的地方是什么,机器人“看”到的东西是什么.比如进入到一个房间,点云地图中,机器人并不能识别显示出来的一块块的点云到底是什么,但是语义地图的构建可以分 ...
- python进阶12 Redis
python进阶12 Redis 一.概念 #redis是一种nosql(not only sql)数据库,他的数据是保存在内存中,同时redis可以定时把内存数据同步到磁盘,即可以将数据持久化,还提 ...
- POJ1741（点分治）
分治的时候SZ感觉是错的--但是貌似第一次找好重心就够了,之后SZ别太离谱就不会T,重心随一随缘就好-- #include <cstdio> #include <cstring> ...
- QDU第一届程序设计大赛——E到I题解法（非官方题解）
题目链接https://qduoj.com/contest/28/problems,密码:qdu1230 E题: 思路:先进行排序,然后去暴力模拟就可以,但可能WA了几次,导致此题没解出来,有点可惜 ...