1、新建文件夹

2、文件夹中新建index.html 和 index.js

　　index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <div class="contain">
  9.         <div class="item">
  10.             <h5>A1</h5>
  11.             <span>100</span>元
  12.         </div>
  13.         <div class="item">
  14.             <h5>B2</h5>
  15.             <span>100</span>元
  16.         </div>
  17.         <div class="item">
  18.             <h5>C3</h5>
  19.             <span>100</span>元
  20.         </div>
  21.         <div class="item">
  22.             <h5>D4</h5>
  23.             <span>100</span>元
  24.         </div>
  25.         <div class="item">
  26.             <h5>E5</h5>
  27.             <span>100</span>元
  28.         </div>
  29.         <button>close</button>
  30.     </div>
  31.     <script>
  32.         var mess = document.querySelector('.contain');
  33.         if(window.WebSocket){
  34.             var ws = new WebSocket("ws://localhost:8006")
  35.             document.querySelector('button').onclick = function(){
  36.                 ws.close();
  37.             }
  38.             ws.onopen = function () {
  39.                 ws.send('getPrice');
  40.             }
  41.             ws.onclose = function () {
  42.                 ws.close();
  43.             }
  44.             ws.onerror = function () {
  45.                 ws.close();
  46.             }
  47.             ws.onmessage = function (e) {
  48.                 var data = JSON.parse(e.data);
  49.                 var arr = [];
  50.                 data.current.forEach((value)=>{
  51.                     arr.push(`<div class="item"><h5>${value.id}</h5><span>${value.price}</span>元</div>`)
  52.                 })
  53.                 mess.innerHTML = arr.join('');
  54.             }
  55.         }
  56.     </script>
  57. </body>
  58. </html>

　　index.js

  1. var ws = require('nodejs-websocket');
  2. var pubSub = {
  3.     subscribe:[],
  4.     addPub(coon){
  5.         this.subscribe.push(coon)
  6.     },
  7.     pubInfo(data){
  8.         this.subscribe.forEach((value)=>{
  9.             console.log(value)
  10.             value.sendText(data);
  11.         })
  12.     }
  13. }
  14. var serve = ws.createServer(function (coon) {
  15.     coon.on('text',function (str) {
  16.         if(str == "getPrice"){
  17.             // console.log(coon);
  18.             pubSub.addPub(coon)
  19.         }
  20.     })
  21.     coon.on('close',function () {
  22.         console.log('close')
  23.     })
  24.     coon.on('error',function (code) {
  25.         console.log('error')
  26.     })
  27. }).listen(8006)
  28.  
  29. function _RandNum() {
  30.     return Math.ceil(Math.random() * 100);
  31. }
  32. function getData() {
  33.     return JSON.stringify({"current":[
  34.             {
  35.                 id:"A1",
  36.                 price:_RandNum()
  37.             },
  38.             {
  39.                 id:"B2",
  40.                 price:_RandNum()
  41.             },
  42.             {
  43.                 id:"C3",
  44.                 price:_RandNum()
  45.             },
  46.             {
  47.                 id:"D4",
  48.                 price:_RandNum()
  49.             },
  50.             {
  51.                 id:"E4",
  52.                 price:_RandNum()
  53.             }
  54.         ]})
  55. }
  56.  
  57. setInterval(()=>{
  58.     pubSub.pubInfo(getData());
  59. },2000)

3、文件夹下右键 open in Terminal ，安装 nodejs-websocket

  1. npm install nodejs-websocket

目录下多了文件夹：node_modules

4、在Terminal运行 node index.js

打开页面即可实现页面实时刷新数据。

websocket+订阅发布者模式模拟实现股票价格实时刷新的更多相关文章

  1. Android 订阅-发布者模式-详解

    1.概念简述 Android 简称观察者模式, GoF说道:Observer模式的意图是“定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新”. 有 ...

  2. websocket实现数据库更新时前端页面实时刷新

    websocket实现数据库更新时前端页面实时刷新 javaweb 目录(?)[+] userjsp ManagerServletjava 如题,实现以上功能,我知道主要有两大种思路: 轮询:轮询的原 ...

  3. C#事件支持发布者/订阅者模式（观察者模式）

    C#事件支持发布者/订阅者模式,发布者将事件通知给订阅者,而订阅者在事件发生时调用已经注册好的事件处理函数.        public delegate void delUpdate();  //委 ...

  4. vue双向绑定(数据劫持+发布者-订阅者模式)

    参考文献:https://www.cnblogs.com/libin-1/p/6893712.html 实现mvvm主要包含两个方面,数据变化更新视图,视图变化更新数据. 关键点在于data如何更新v ...

  5. EventBus事件总线框架（发布者/订阅者模式，观察者模式）

    一. android应用内消息传递的方式: 1. handler方式-----------------不同线程间传递消息. 2. Interface接口回调方式-------任意两个对象. 3. In ...

  6. JavaScript 设计模式: 发布者-订阅者模式

    JavaScript 设计模式: 发布者-订阅者模式 发布者-订阅者模式 https://github.com/Kelichao/javascript.basics/issues/22 https:/ ...

  7. 设计模式---订阅发布模式(Subscribe/Publish)

    设计模式---订阅发布模式(Subscribe/Publish) 订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象.这个主题对象在自身状态变化时,会通知所有订阅者对象,使 ...

  8. Kafka下的生产消费者模式与订阅发布模式

    原文:https://blog.csdn.net/zwgdft/article/details/54633105   在RabbitMQ下的生产消费者模式与订阅发布模式一文中,笔者以“数据接入”和“事 ...

  9. Publisher/Subscriber 订阅-发布模式

    Publisher/Subscriber 订阅-发布模式 本博后续将陆续整理这些年做的一些预研demo,及一些前沿技术的研究,与大家共研技术,共同进步. 关于发布订阅有很多种实现方式,下面主要介绍WC ...

随机推荐

  1. 2017-9-14 NOIP模拟赛

    送分题 (songfen)e Time Limit: 10 00ms y Memory Limit:128MB题目描述LYK 喜欢干一些有挑战的事, 比如说求区间最大子段和. 它知道这个题目有 O(n ...

  2. 洛谷P3959 宝藏（状压dp）

    传送门 为什么感觉状压dp都好玄学……FlashHu大佬太强啦…… 设$f_{i,j}$表示当前选的点集为$i$,下一次要加入的点集为$j$时,新加入的点和原有的点之间的最小边权.具体的转移可以枚举$ ...

  3. 12.创建高级联结---SQL

    一.使用表别名 SQL除了可以对列名和计算字段使用别名,还允许给表名起别名.这样做有两个主要理由: 缩短SQL语句: 允许在一条SELECT语句中多次使用相同的表. SELECT cust_name, ...

  4. Net Core WebApi几种版本控制对比

    Net Core WebApi几种版本控制对比 一.版本控制的好处: (1)有助于及时推出功能, 而不会破坏现有系统. (2)它还可以帮助为选定的客户提供额外的功能. API 版本控制可以采用不同的方 ...

  5. (转)Module ngx_http_fastcgi_module

    Example ConfigurationDirectives     fastcgi_bind     fastcgi_buffer_size     fastcgi_buffering     f ...

  6. document.getElementById(...) is null

    <html> <head> <script type="text/javascript"> document.getElementById('b ...

  7. LCD1602显示中文汉字

    小子在西藏 2011-11-25编写 特别说明笔者是上面的作者,感谢那些原意分享知识的人.时隔5年我又看到了笔者当年写的东西,我想这期间还有许许多多的人 今天写在博客上,愿更多后来者可以学习. LCD ...

  8. JS中比较的数值如何比较大小

    <script type="text/javascript"> function check_num(){ var num=document.getElementByI ...

  9. Java中的日志框架

    日志框架的介绍和使用 常见的日志框架:JUL(Java.util.logging),JCL(jakarta commons logging),SLF4J,jboss-logging,Log4j,Log ...

  10. springboot+shiro+cas实现单点登录之shiro端搭建

    github:https://github.com/peterowang/shiro-cas 本文如有配置问题,请查看之前的springboot集成shiro的文章 1.配置ehcache缓存,在re ...