Node.js+Socket.io实时传输汇率报价至浏览器的实现问题求助

你的核心需求是无需用户操作，自动实时将Redis中的货币报价推送到浏览器并更新展示。目前你的Node.js已经能从Redis获取并格式化数据，只需要补上Socket.io的推送逻辑，以及浏览器端的接收更新逻辑即可。

第一步：修正Node.js代码（推送逻辑） #

这里有几个关键调整点：

• 修正Redis数据读取后的字段大小写（你的数据里是symbol而不是SYMBOL）
• 在定时器里直接通过io.emit将格式化后的报价推送给所有连接的客户端
• 优化客户端连接时的初始化推送，避免页面加载后空白等待

修改后的Node.js代码：

const redis = require('redis');
const settings = { REDIS: { HOST: 'localhost' } }
let redisClient = new redis.createClient(settings.REDIS);
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
 res.sendFile(__dirname + '/index.html');
});

http.listen(3000, function(){
 console.log('listening on *:3000');
});

function getQuote(symbol, callback) {
 redisClient.get(symbol, (error, quote) => {
  if (error) {
   throw new Error(error);
  }
  // 注意：Redis存储的是小写symbol字段，修正字段名匹配
  const parsedQuote = JSON.parse(quote);
  callback(parsedQuote);
 });
}

// 每隔10ms获取一次报价并推送给所有在线客户端
setInterval(() => {
 getQuote('EURUSD', (q) => {
  const formattedQ = `${q.symbol} | bid - ${q.bid} | ask - ${q.ask} | price - ${q.price}`;
  console.log(formattedQ);
  // 核心：通过Socket.io主动推送格式化后的报价
  io.emit('quote_update', formattedQ);
 });
}, 10);

// 客户端连接时主动推送一次当前报价，优化首次加载体验
io.on('connection', function(socket){
 console.log('a user connected');
 getQuote('EURUSD', (q) => {
  const formattedQ = `${q.symbol} | bid - ${q.bid} | ask - ${q.ask} | price - ${q.price}`;
  socket.emit('quote_update', formattedQ);
 });
});

第二步：修正HTML代码（接收并更新展示） #

需要在页面中添加一个用于显示报价的容器，然后在Socket.io接收到推送时更新该容器的内容：

修改后的HTML代码：

<!DOCTYPE html>
<html>
<head>
 <title>实时货币报价</title>
</head>
<body>
 <!-- 添加报价显示容器，基础样式优化可读性 -->
 <div id="quote-display" style="font-size: 18px; padding: 20px; border: 1px solid #eee; border-radius: 4px;"></div>

 <script src="/socket.io/socket.io.js"></script>
 <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
 <script>
 $(function () {
  var socket = io();
  // 监听服务器推送的quote_update事件，实时更新页面
  socket.on('quote_update', function(formattedQuote){
   // 将接收到的格式化报价写入页面容器
   $('#quote-display').text(formattedQuote);
  });
 });
 </script>
</body>
</html>

关键逻辑说明 #

1. 主动推送模式：你的需求是无操作实时更新，所以我们用setInterval定时拉取Redis数据，通过io.emit推送给所有在线客户端，不需要客户端触发请求。
2. 字段匹配修正：你提供的Redis数据结构是{"symbol": "EURUSD", ...}，所以代码里必须用q.symbol，否则会显示undefined。
3. 首次加载优化：客户端连接时主动推送一次当前报价，避免页面加载后等待10ms才显示内容，提升用户体验。

这样修改后，打开http://localhost:3000就能看到实时自动更新的货币报价，完全不需要刷新页面或点击按钮。

内容的提问来源于stack exchange，提问作者VladSiy