Javascript 正在将socket.io实例发送到express route_Javascript_Node.js_Express_Websocket_Socket.io

Javascript 正在将socket.io实例发送到express route

javascript node.js express websocket socket.io

Javascript 正在将socket.io实例发送到express route,javascript,node.js,express,websocket,socket.io,Javascript,Node.js,Express,Websocket,Socket.io,我正在尝试创建一个nodejs应用程序，它将使用它们的API在各种网站中搜索。当客户端使用socket.io从这些API接收结果时，结果将立即发送到客户端。然后前端将使用jQuery添加这些结果实现这一点的最佳方式是什么到目前为止，我已经尝试：示例代码1 首先，我为express创建了一个中间件，将套接字添加到请求中，如- var socketMiddleWare = function(req, res, next){ io.on('connection', function(sock

我正在尝试创建一个nodejs应用程序，它将使用它们的API在各种网站中搜索。当客户端使用socket.io从这些API接收结果时，结果将立即发送到客户端。然后前端将使用jQuery添加这些结果

实现这一点的最佳方式是什么

到目前为止，我已经尝试：

示例代码1 首先，我为express创建了一个中间件，将套接字添加到请求中，如-

var socketMiddleWare = function(req, res, next){
  io.on('connection', function(socket){
    console.log(io.engine.clientsCount + " clients connected.");
    req.socket = socket;
    
    socket.on('disconnect', function(){
      console.log(io.engine.clientsCount + " clients after disconnec.");
    });
    
  });
  next();
};

然后将这个中间件添加到我的路由中-

app.use('/users', socketMiddleWare, users);

它可以工作，但问题是每次用户刷新页面时都会创建多个事件侦听器

示例代码2 于是我尝试了（示例代码）

在我的测试路线上，我做到了

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  if(socket){
    socket.emit('response', 'nothing');
  }
  res.render('index', { title: 'Express' });
});

module.exports = router;

它解决了以前刷新时多事件侦听器的问题，但大多数情况下它无法发出响应。甚至我的浏览器也无法显示结果。在客户方面，我做了类似的事情-

var socket = io.connect('http://localhost');

socket.on('response', function(data){
    console.log(data);        
    document.getElementById("change").innerHTML += data;
});

我可以在浏览器控制台中看到响应，但我的浏览器在它消失之前会显示几毫秒的更改

我认为主要问题是在建立套接字连接之前页面加载

我目前正在学习node.js和socket.io。所以请帮帮我

结论我确实计划在将来使用socket.io添加社交网络功能，如一对一消息、主页上的实时好友提要更新等。请让我知道是否有任何好的文档或开源项目可以帮助我实现它

在过去的几天里，我一直在寻找解决方案，但到目前为止运气不佳。我已经准备好学习任何新的方法或完全重写我的代码

TL；博士

当用户客户端搜索项目时，在新数据可用时将内容推送到请求内容的客户端。通过API处理来自“”和“”等网站的响应后，数据可用。

您可以使用套接字的ID跟踪将结果发送到哪个套接字

客户然后，当用户搜索某个对象时，该ID将包含在查询参数中

<body>
    <form>
        <!-- Disable the search bar until the socket is connected -->
        <input type="search" name="q" placeholder="Search" disabled>
    </form>
    <div id="results"></div>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        var resultsElement = document.querySelector("#results");
        var search = document.querySelector("form [type=search]");
        var socket = io("http://localhost:3000");


        socket.on("connect", function(){
            search.disabled = false;
        });

        socket.on("results", function(results){
            for(var i = 0;i < results.length;i++){
                var result = document.createElement("div");
                result.textContent = results[i];
                resultsElement.appendChild(result);
            }
        });

        document.querySelector("form").addEventListener("submit", function(event){
            fetch("/search?socketID=" + encodeURIComponent(socket.id) + "&q=" + encodeURIComponent(search.value));
            event.preventDefault();
        });
    </script>
</body>

谢谢你的回复。我的gobal.socket方法现在在我的设置中运行良好。因为外部服务的API响应需要时间来处理，同时套接字连接也需要建立。您是否测试过同时从两个位置进行搜索？只有一个套接字会得到结果。我刚刚尝试在我的global.socket代码中同时搜索两个位置，所有搜索结果只推送到一个客户端。其他客户没有反应！谢谢@Metarmak

<body>
    <form>
        <!-- Disable the search bar until the socket is connected -->
        <input type="search" name="q" placeholder="Search" disabled>
    </form>
    <div id="results"></div>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        var resultsElement = document.querySelector("#results");
        var search = document.querySelector("form [type=search]");
        var socket = io("http://localhost:3000");


        socket.on("connect", function(){
            search.disabled = false;
        });

        socket.on("results", function(results){
            for(var i = 0;i < results.length;i++){
                var result = document.createElement("div");
                result.textContent = results[i];
                resultsElement.appendChild(result);
            }
        });

        document.querySelector("form").addEventListener("submit", function(event){
            fetch("/search?socketID=" + encodeURIComponent(socket.id) + "&q=" + encodeURIComponent(search.value));
            event.preventDefault();
        });
    </script>
</body>

var app = require("http").createServer(handler);
var io = require("socket.io")(app);
var fs = require("fs");
var url = require("url");
app.listen(3000);

function handler(req, res) {
    var query = url.parse(req.url, true).query;
    if(req.url.startsWith("/search")){
        var results = ["things", "stuff", "items"];
        // Server-side IDs have "/#" in front of them
        var socket = io.sockets.connected["/#" + query.socketID];
        if(socket){
            // Get and send "search results"
            var interval = setInterval(function(){
                var popped = results.pop();
                if(popped){
                    socket.emit("results", [query.q + " " + popped]);
                }else{
                    clearInterval(interval);
                }
            }, 1000);
        }
        res.writeHead(204);
        res.end();
    }else{
        fs.readFile(__dirname + "/index.html", function(err, data) {
            res.writeHead(200);
            res.end(data);
        });
    }
}