使用 socket.io、node.js 和 mongodb 在服务器端更新 ejs 变量

Question

我正在使用mongodb和猫鼬来维护客户之间的股票列表。我想在一个用户进行更改时使用 socket.io 同时更新列表。我可以连接到套接字并更新客户端 javascript，但不能更改服务器端的变量。

应用程序.js - 服务器

// connect to socket.io
io.on('connection', function (socket) {
console.log('Client Connected..');
///retrieve new stock from client
socket.on('submitStock', function (data) {
console.log(data);
///do mongodb stuff here
///send new stocks to all clients
socket.emit('activeStocks', data);
});
});

脚本.js - 客户端

var socket = io.connect();
///connect to socket
socket.on('connect', function (data) {
socket.emit('join', 'Hello World from client');
});
///use submit button to send the new stock to server
$('#addStock').on('submit', function(e){
//var stockList = $('#stockList');
socket.emit('submitStock', 'here is the data');
});
//retrieve the new stock from the server and update list
socket.on('activeStocks', function(data) {
//how to update activeStocks here??
console.log(data);
});

index.ejs

<% if (message.length > 0) { %>
<div class="alert alert-danger"><p><%= message %></p></div>
<% } %>
<div class="container">
<form id="addStock" action="/add" method="post">
<div class="form-inline">
<input type="text" class="form-control" name="stockTicker" placeholder="Enter a stock ticker">
<button type="submit" class="btn btn-primary"><span>Add Stock</span></button>
</div>
</form>
</div>
<% if (activeStocks) { %>
<% for (var i=0; i< activeStocks.length; i++) { %>
<div> <%- activeStocks[i] %></div>
<% } %>
<% } %>

Answer 1

1. 假设我们在索引中有一个div.js让它<div id="stocks">
，
2. 设data是一个字符串数组，

请尝试以下代码：

socket.on('activeStocks', function(data) {
document.getElementById('stocks').innerHTML = '';
data.forEach( function (stock) {
document.getElementById('stocks').innerHTML += stock + '<br>';
});
});

Answer 2

由于我使用的是mongoDB和index.ejs中的变量activeStocks，因此我无法重写或附加html。我需要 mongo ID 以便将来可能删除。我从这个问题中对div进行了部分刷新：使用jquery/ajax刷新/重新加载Div中的内容

索引.js

var io = require('../server');
io.on('connection', function (socket) {
console.log('Client Connected..');
///retrieve new stock from client
socket.on('submitStockToServer', function (data) {
///send new stocks to all clients except socket that started it.
socket.broadcast.emit('newStockToClient', data);
});
socket.on('updateMyStocks', function (data) {
///only send to each updated client
socket.emit('updated', data);
});
});

脚本.js

var socket = io.connect();
//connect to socket
socket.on('connect', function () {
console.log('connected');
});
//use submit button to send the new stock to server
$('#addStock').on('submit', function(e){
//var stockList = $('#stockList');
socket.emit('submitStockToServer');
console.log('submitted');
});
//retrieve information on new stock and send back request to server
socket.on('newStockToClient', function() {
socket.emit('updateMyStocks', 'Your stocks are now updated');
});
//check if its updated
socket.on('updated', function () {
///partially reload stock div
$("#stockContainer").load(location.href+" #stockContainer>*","");
});

index.ejs

<div id="stockContainer">
<% if (activeStocks) { %>
<% for (var i=0; i< activeStocks.length; i++) { %>
<div> <%- activeStocks[i] %></div>
<% } %>
<% } %>
</div>