Question

我创建了一个有两个不同页面的网站。现在，我想进行两个不同的聊天，一个用于第一页，另一个用于第二页。我需要使用socket.io和javascript。我希望两个聊天都可以在各自的页面上进行，这些页面具有发送按钮，消息的输入字段和您的姓名的输入字段。因此，这两个页面可以单独工作。我知道我可以通过使用名称空间来实现这一点，所以我实现了它们，但是它不起作用，我可能做了一些谜。你可以帮帮我吗？我的代码分为2页：index.js和chat.js。这里是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中的代码（这是一个html页面中链接的文件，另一页面当前未链接任何文件）：

//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;
});

这是HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MEETY - Torino</title>
<script src="/socket.io/socket.io.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-  awesome.min.css">
<link rel="shortcut icon" href="icona.ico">

</head>
<body id="index-body">


    <div id="output"></div>

    <script src="/chat.js"></script>
    <input type="text" id="message" placeholder="Cosa vorresti fare..." maxlength="100"  required>
    <button id="send" ><i class="fa fa-send-o"></i></button>




<aside>
<input id="handle" type="text" placeholder="Il tuo nome" maxlength="18" required>
<p>Sei a Torino <br> <br> Vai a <a href="milano.html">Milano</a> </p>
<p id="home"><a href="home.html"><i class="fa fa-home"></i></a></p>  
<div id="feedback"><div id="segnaposto"></div></div> 
<div id="numero"></div>
</aside>
<script src="/chat.js"></script>
</body>
</html>

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

0 个答案: