Nodejs, express &套接字.两个静态客户端页面之间的IO通信

Nodejs, express & socket.io communicate between two static client pages

本文关键字：客户端 静态 之间 通信 IO 两个 express 套接字 Nodejs      更新时间：2023-09-26

我正试图通过使用nodejs, express &socket . io .

结构如下

/index.js
/public/screen.html
       /screen.js
       /remote.html
       /remote.js

这个想法是在remote.html上显示一个图库，选择一个并通过socket.io将选定的索引发送给screen.html。

现在我的代码看起来像这样:

index.js 

var express = require('express');
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io').listen(server);
app.use(express.static('public'));
server.listen(8080, function(){
    // setup image gallery and stuff...
    connectToServer();
});

remote.js 

var socket = null;
document.addEventListener("DOMContentLoaded", function(event) {
    //some stuff
    connectToServer();
});
function showImage (index){  //called by events
    console.log('selected incdex: ' + index);
    if(socket != null) {
        socket.emit('selection', {id: index});
    };
}
function connectToServer(){
    socket = io.connect('http://localhost:8080');
    socket.on('connection', function (socket) {
        var text = document.querySelector('#name');
        socket.emit('newRemote', 'new remote connected');
        console.log('emitted welcome');
        socket.on('newScreen', function (data) {
            console.log(data);
        });
    });
}

screen.js 

var socket = null;
document.addEventListener("DOMContentLoaded", function(event) {
    //some stuff
    connectToServer();
});
function connectToServer(){
    socket = io.connect('http://localhost:8080');
    socket.on('connection', function (socket) {
        var text = document.querySelector('#name');
        socket.emit('newScreen', { name: name });
        socket.on('newRemote', function (data) {
            console.log(data);
        });
    });
};

从node index.js开始，我得到

listening on *:8080

和加载screen或remote.html时，我得到

debug - client authorized
info  - handshake authorized MwtGFRCZamcyKkUpK5_W

在我看来:某种程度上建立了一个连接，但是:

两端都没有发送/接收消息没有将连接事件的日志打印到控制台

你知道为什么什么都没发生吗?

看来您已经将服务器端代码混合到客户机中了。'connection'事件是需要在服务器上监听的事件，而不是您的客户端文件。此外，您不能从服务器端代码直接调用客户端函数。下面的代码不起作用:

server.listen(8080, function(){
// setup image gallery and stuff...
connectToServer();
});

要实现上述目标，您需要在服务器上放置以下代码:

server.listen(8080, function(){
  socket.on('connection', function (socket) {
    // setup image gallery and stuff...
    socket.emit('connectToServer', myPassedParameters);
  });
});

以及客户机上该事件的以下侦听器:

socket.on('connectToServer', function (myPassedParameters) {
    var text = document.querySelector('#name');
      // stuff for client side here
    });
});

除此之外，您不能使用socket.io从一个客户端文件调用到另一个客户端文件。您必须首先调用服务器，然后在为用户加载了另一个文件后调用该文件上的函数。

相关文章：