Question

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

app.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);
     });
});

script.js - client

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

假设我们在index.js中有一个div，让它为<div id="stocks">，
让data成为字符串数组

请尝试以下代码：

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

Answer 2

由于我在index.ejs中使用mongoDB和变量activeStocks，因此我无法重写或附加html。我需要将mongo Id用于将来的潜在删除。我从这个问题中删除了部分刷新的div：Refresh/reload the content in Div using jquery/ajax

index.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);
  });
});

的script.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>

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

2 个答案: