在现代 Web 开发中，实时数据可视化变得越来越流行。无论是实时交易、实时数据监控，还是实时聊天和多人协作，我们经常需要将实时数据快速地在页面上实时展现出来。这时候，Socket.io 就成为了一种流行的实时数据传输解决方案。
本文将简单介绍什么是 Socket.io，如何使用它进行实时数据传输，并提供一个实时股票行情可视化的案例。
Socket.io 简介
Socket.io 是基于 Node.js 库的实时 Web 应用程序开发库。它可以在浏览器和服务器之间建立一个双向的通信通道，让两端可以实时通信。它支持兼容各种浏览器和移动设备的 Websocket 协议，同时也支持 XHR 长轮询和 JSONP 等技术，从而保证了跨平台的可兼容性。
如何使用 Socket.io 进行实时数据传输
下面我们将通过一个简单的例子来介绍如何使用 Socket.io 实现实时数据的传输和展现。假设我们有一个股票行情的实时数据流，需要将其实时展现在一个页面上。
准备工作
首先，你需要安装 Node.js 环境。然后使用 npm 安装 socket.io：
npm install socket.io
接着，我们需要创建一个服务器文件。创建一个 app.js：
// javascriptcn.com 代码示例
const http = require('http');
const io = require('socket.io')(http);
const port = 3000;
const server = http.createServer(() => {});
server.listen(port, () => {
console.log(`Listening to requests on ${port}`);
});
io.on('connection', (socket) => {
socket.emit('message', 'Connected to server.');
setInterval(() => {
socket.emit('message', `[${new Date()}] Stock price: ${Math.random() * 100}`);
}, 1000);
});在上述代码中，我们创建了一个 HTTP 服务器，然后使用 Socket.io 集成的 on 方法和 connection 事件来监听新连接。每当有新的连接时，我们会向该连接发送一个“Connected to server.”的消息。
另外，我们设置了一个定时器，每秒向客户端发送一个新的股票价格数据。网络传输速度也限制了数据的更新速度，这里我们可以根据自己实际的实时数据更新频率设置合适的数据更新时间。
编写客户端
创建一个index.html文件，添加以下代码：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
<title>Socket.io demo</title>
</head>
<body>
<h1>Real-time stock price</h1>
<ul id="messages"></ul>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function () {
const socket = io();
socket.on('message', (data) => {
$('#messages').append($('<li>').text(data));
});
});
</script>
</body>
</html>在此示例中，我们使用 jQuery 添加了一个 <ul> 元素，然后使用 Socket.io 的 on 方法和 message 事件在客户端监听数据。当有新的数据传送时，我们将其添加在 <ul> 中。
启动服务器
最后启动服务器，打开命令终端并输入以下命令：
node app.js
如果一切正常，你应该可以在浏览器中通过访问 http://localhost:3000 来看到该页面，而 Flask 后端也会开始向客户端发送实时股票行情数据了。
通过这个例子，我们可以看到如何使用 Socket.io 进行 WebSocket 数据通信，以及如何在客户端展现实时更新的数据。
案例：实时股票行情可视化
现在你已经了解了如何使用 Socket.io 进行实时数据传输和展现了，接下来我们使用此方案在股票数据可视化方面进行实际应用。
准备工作
在开始之前，我们需要准备一些代码和数据。这里我们使用 Python 来获取股票数据流，并将其发送到 Socket.io 实时通信通道中。假设我们已经通过 Python 抓取了股票的 api 数据，以下是我们的 Python 代码：
// javascriptcn.com 代码示例
# coding:utf-8
import urllib.request
import time
import re
import json
import requests
from requests.exceptions import RequestException
from bs4 import BeautifulSoup
def get_price():
url ='http://hq.sinajs.cn/list=sh000001'
try:
response = urllib.request.urlopen(url)
except (urllib.error.HTTPError, urllib.error.URLError) as e:
print('%s : %s' % (time.strftime('%Y-%m-%d %H:%M:%S'), e))
else:
html_cont = response.read().decode('gbk')
soup = BeautifulSoup(html_cont, 'html.parser')
txt = soup.find("p").get_text()
pattern = re.compile(r"=\"(.*)\"")
res = re.findall(pattern, txt)
if len(res) > 0:
data = res[0].split(',')
change_spread = float(data[3]) - float(data[2])
spread_percentage = (change_spread / float(data[2])) * 100
volume = (float(data[9])/10000)
sendSignal = json.dumps({
"name": "Stock Price",
"lastTrade": float(data[3]),
"change": round(change_spread, 2),
"changePrecent": round(spread_percentage, 2),
"volume": round(volume, 2),
"time": time.strftime("%Y-%m-%d %H:%M:%S", time.localtime())
})
emitMessage(sendSignal)
def emitMessage(message):
try:
requests.post("http://localhost:3000/live-data", json=message)
except RequestException as e:
print('%s' % (e))
if __name__ == "__main__":
while True:
get_price()
time.sleep(5)该代码每隔 5 秒获取一次股票数据，然后使用 Python Requests 实现向 Flask 服务器实时数据通信的功能。
接着，我们需要为前端准备展现股票数据的页面。对于股票行情的数据可视化，我们选择一个基于图表的库 Highcharts 作为展现方式，这里是页面代码：
// javascriptcn.com 代码示例
<!doctype html>
<html>
<head>
<title>Socket.io Demo - Realtime Stock Price</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highcharts@9.2.0/highcharts.js"></script>
<style>
#chart {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="chart"></div>
<script src="/socket.io/socket.io.js"></script>
<script>
$(function () {
let chart;
const socket = io.connect("http://localhost:3000");
let seriesData = []
let xAxisData = []
socket.on("connect", () => {
console.log("Connected to server.");
});
socket.on("message", (message) => {
let data = JSON.parse(message);
let volume = data.volume;
let temp = [new Date(data.time).getTime(), data.lastTrade];
if (seriesData.length < 30) {
seriesData.push(temp);
xAxisData.push(volume)
} else {
seriesData.shift();
xAxisData.shift();
seriesData.push(temp);
xAxisData.push(volume);
}
if (chart) {
chart.series[0].setData(seriesData);
chart.xAxis[0].setCategories(xAxisData);
} else {
chart = Highcharts.chart("chart", {
chart: {
type: "spline",
animation: Highcharts.svg,
marginRight: 10,
events: {
load: function () {
let series = this.series[0];
setInterval(function () {
series.addPoint(temp, true, true);
}, 5000);
}
}
},
title: {
text: "Real-time Stock Price"
},
xAxis: {
type: "category",
labels:{
formatter:function(){
return Highcharts.dateFormat('%H:%M:%S', this.value);
}
},
title: {
text: "Volume"
},
categories: xAxisData,
},
yAxis: {
title: {
text: "Price"
},
plotLines: [{
value: 0,
width: 1,
color: "#808080"
}]
},
tooltip: {
formatter:function(){
return Highcharts.dateFormat('%H:%M:%S', this.x)+'<br>'+this.y;
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: "Price",
data: seriesData
}]
});
}
});
});
</script>
</body>
</html>在此示例中，我们使用了 Highcharts 库来绘制实时股票价格折线图，并结合 Socket.io 实现动态更新。每当服务器发送一个新数据时，我们将其加入初期定义的数据数组中，如果数据条数超过设定的临界值，则从超出数组部分中取出相应的元素。然后用数据更新图表中的数据即可。这样股票行情就实时可视化展现在前端页面上了。
启动应用
首先，启动 Python 程序监听端口:
python stock.py
再运行：
npm run start
浏览器打开 http://localhost:3000 即可看到实时股票行情可视化页面。
总结
在本文中，我们从 Socket.io 的介绍开始着手，介绍了如何使用它进行实时数据传输，及其在实时股票行情可视化方面的应用。
除了股票行情数据，Socket.io 在 Web 应用程序的开发中，也被广泛用于多人在线游戏、实时聊天、在线协作等多种场景。在跨平台商业 Web 应用程序开发中，本方案具有很高的参考价值。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6547574a7d4982a6eb1b47bd