快速路由socket.io發出客戶端未捕獲的數據

Question

我可以在ExpressJS路由文件中發出套接字。 但是客戶端的javascript無法讀取發出的數據。

server.js

var express = require('express');
var path = require('path');
var app = express();
var server = require('http').createServer(app);
var io = require('socket.io')(server);
var bodyParser = require('body-parser');


app.use(express.static(__dirname + '/node_modules'));
app.use("/css", express.static(__dirname + '/css'));
app.use("/js", express.static(__dirname + '/js'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.set('io', io);

var aws_router = require('./app/routes')(app);

server.listen(8080);

app / routes.js

var express = require('express');
var router = express.Router();
var bodyParser = require('body-parser');
var path = require('path');
var process = require('process');



var aws_router = function(app, io){

  app.get('/', function(req, res) {
    //need to read from database
    var socketio = req.app.get('io');
      var objShopper = "hello"
      console.log(objShopper)
      socketio.emit("viewdata", objShopper);
      res.sendFile(path.join(process.cwd() + '/index.html'));
  });
  return router;
}

module.exports = aws_router;

套接字發出部分工作正常，至少我沒有看到錯誤，並在控制台中輸出了hello。 但是，當我嘗試從客戶端JS讀取發出的數據時，我無法讀取它。

client.js

$( document ).ready(function() {

    var socket = io.connect('http://localhost:8080');
    socket.on('viewdata', function (results) {
        console.log("read data");
        var objShopper = JSON.parse(results);
    });

});

控制台中永遠不會顯示"read data" 。 我想念什么？

Answer 1

您有時間問題。 您正在嘗試在連接之前發送到套接字。 這是事件的順序：

1. 瀏覽器從您的服務器請求http：// yourdomain / 。
2. 您的快遞路線/獲得請求。
3. 您將獲得io實例並執行io.emit() 。
4. 然后，您發送index.html以滿足瀏覽器請求。
5. 瀏覽器解析結果文件
6. 瀏覽器運行您的Javascript，該Javascript與服務器建立socket.io連接。

希望您可以看到第6步發生在第3步之后很長時間，或者換句話說，第3步發生在當前請求的頁面甚至與服務器的socket.io連接之前。 因此，當您執行io.emit()並遍歷所有當前連接以將消息發送給所有這些連接時，當前請求的頁面不在該列表中，因為尚未建立連接。 用Java語言編寫頁面，以使連接尚未發送到瀏覽器。

---

在請求頁面時已知的數據應僅放入頁面中。 目前尚無socket.io連接，因此您無法將其發送到那里。 如果您希望它出現在頁面中，請在頁面中發送它。

如果不想（由於某種原因）將其放在初始頁面中，則可以讓頁面加載並運行，讓頁面中的Javascript通過Ajax調用或Javascript連接從服務器請求數據使用socket.io連接到您的服務器，並且服務器看到傳入的socket.io連接，然后可以發送數據（由於此時已經建立了socket.io連接，因此時間現在是正確的）。

Answer 2

除了jfreind00答案，我認為您應該在服務器端使用connection事件，當在客戶端和服務器之間建立連接時將觸發該事件，然后可以向客戶端發射數據：

var aws_router = function(app, io){

    app.get('/', function(req, res) {

        res.sendFile(path.join(process.cwd() + '/index.html'));
    });


    //make sure client and server are connected
    io.on('connection', function (socket) {
        var objShopper = "hello"
        console.log(objShopper)
        socketio.emit("viewdata", objShopper);
    });


    return router;
}