Question

我还不是真正的专家，无论如何，谢谢您的帮助。我创建了一个包含两个不同页面的网站。现在，我想进行两个不同的聊天，一个用于第一页，另一个用于第二页。我需要使用socket.io。实际上，我已经实现了该代码来进行一个正常的聊天，但是当我在此聊天中键入内容时，该消息甚至出现在另一个聊天中。因此，这意味着两个聊天相互链接。这是问题所在，因为我希望他们与众不同。我想让他们使用自己的页面，这些页面具有发送按钮，消息的输入字段和名称的输入字段。因此，这两个页面可以单独工作，但我不知道如何。我的代码分为2页：index.js和chat.js。这里是Index.js：

var express = require('express');
var socket = require('socket.io');
//app setup
var app = express();
var server = app.listen(8080, function(){
console.log('ascoltando la richiesta alla porta 8080');
});
//static 
app.use(express.static('public'));
//socket setup
var io = socket(server);
io.on('connection', function(socket){
console.log('fatta la connessione socket', socket.id);
socket.on('chat', function(data) {
io.emit('chat', data); 
});
socket.on('typing', function(data) {
socket.broadcast.emit('typing', data);
});
});

这是放置在chat.js中的代码（这是一个html页面中链接的文件，另一页面当前未链接任何文件）：

//connessione
var socket = io.connect('http://localhost:8080'); // è una variabile socket diversa da quella in                 index.js
//query
var message= document.getElementById('message'); 
var handle = document.getElementById('handle');
var button = document.getElementById('send');
var output = document.getElementById('output');
var feedback = document.getElementById('feedback');
//scrollbar sempre in basso
function updateScroll(){
var element = document.getElementById("output");
element.scrollTop = element.scrollHeight;
} 
//emit eventi
button.addEventListener('click',function() {
socket.emit('chat', {
message: message.value,
handle: handle.value
}); 
});
message.addEventListener('keypress', function() {
socket.emit('typing', handle.value);
});
//listen eventi
socket.on('chat', function(data){
if (data.message !== "" & data.handle !== "") {
if (handle.value === data.handle) {
    feedback.innerHTML= "" ;
    output.innerHTML +='<p id=inviato>' +'<span id="utente">'+'Tu' +'</span> <br> ' +    data.message +'</p> <br>';
    updateScroll();
    document.getElementById('message').value='';
} else {
    feedback.innerHTML= "" ;
    output.innerHTML +='<p id=ricevuto>' +'<span id="utente">'+data.handle +'</span> <br> '   + data.message +'</p> <br>';
    updateScroll();
    document.getElementById('message').value='';
}
} 
});
socket.on('typing', function(data) {
feedback.innerHTML = '<p>'+ data + ' sta scrivendo...' + io.engine.clientsCount;
});

非常感谢您

Answer 1

您可以通过使用名称空间来实现。 https://haveibeenpwned.com/是名称空间的文档。

这基本上是侦听某些命名空间（即路径）发出的事件。

您可以创建两个单独的对象，为所需的每个名称空间创建一个对象，然后为每个对象添加功能。

这是示例代码：

var io = require('socket.io')(server);

var room1 = io.of('/room1');
var rooms2 = io.of('/room2');

room1.on('connection', function(socket) {
  ...
});

room2.on('connection', function(socket) {
  ...
});

请记住，您必须使用客户端JavaScript连接到正确的名称空间

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

Answer 2

谢谢你，但我可能还不明白，因为它不再起作用：当我按下发送按钮时，什么也没发生。这里有两个更新的代码。 index.js：

var express = require('express');
var io = require('socket.io')(server);

//app setup
var app = express();
var server = app.listen(8080, function(){
console.log('ascoltando la richiesta alla porta 8080');
});


//static 
app.use(express.static('public'));

//socket setup 

var room1 = io.of('/room1');
var room2 = io.of('/room2');


room1.on('connection', function(socket){
console.log('fatta la connessione socket', socket.id);
socket.on('chat', function(data) {
   io.emit('chat', data); 
});
socket.on('typing', function(data) {
    socket.broadcast.emit('typing', data);
});


});
room2.on('connection', function(socket){
console.log('fatta la connessione socket', socket.id);
socket.on('chat', function(data) {
   io.emit('chat', data); 
});
socket.on('typing', function(data) {
    socket.broadcast.emit('typing', data);
});


});

chat.js：

//connessione
var socket = io.connect('http://localhost:8080/room1');// è una variabile socket       diversa da quella in index.js


//query
var message= document.getElementById('message'); 
var handle = document.getElementById('handle');
var button = document.getElementById('send');
var output = document.getElementById('output');
var feedback = document.getElementById('feedback');
//scrollbar sempre in basso
function updateScroll(){
var element = document.getElementById("output");
element.scrollTop = element.scrollHeight;
}
//emit eventi
button.addEventListener('click',function() {
socket.emit('chat', {
   message: message.value,
   handle: handle.value
}); 
});
message.addEventListener('keypress', function() {
socket.emit('typing', handle.value);
});

//listen eventi
socket.on('chat', function(data){
if (data.message !== "" & data.handle !== "") {
    if (handle.value === data.handle) {
        feedback.innerHTML= "" ;
        output.innerHTML +='<p id=inviato>' +'<span id="utente">'+'Tu' +'</span> <br> ' + data.message +'</p> <br>';
        updateScroll();
        document.getElementById('message').value='';
    } else {
        feedback.innerHTML= "" ;
        output.innerHTML +='<p id=ricevuto>' +'<span id="utente">'+data.handle +'</span> <br> ' + data.message +'</p> <br>';
        updateScroll();
        document.getElementById('message').value='';
    }
} 

});


socket.on('typing', function(data) {
feedback.innerHTML = '<p>'+ data + ' sta scrivendo...' + io.engine.clientsCount;
});

如何使用Socket.io在同一网站的两个不同页面中进行两个不同的聊天

2 个答案: