websocket+訂閱發布者模式模擬實現股票價格實時刷新

本文轉載自查看原文 2019-04-16 11:06 1361 ES6/ JS/ 設計者模式

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

打開頁面即可實現頁面實時刷新數據。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 通過tushare獲取股票價格股票價格復權公式軟件設計模式（觀察者模式）——模擬股票價格變動並繪制分時圖和K線圖 Python實現人工神經網絡逼近股票價格利用深度學習來預測股票價格變動 python代寫用線性回歸預測股票價格股票價格漲跌預測—基於KNN分類器發布者訂閱者模式之JAVA實現 js的訂閱發布者模式通過深度學習股價截面數據分析和預測股票價格