Question

以下是服务器端socket.js的代码。我想要做的是我想要创建多个rooms，然后单击特定按钮会通知我的控制台已连接特定的聊天室。我创建了一个namespace名为聊天室，我想创建多个聊天室。我尝试但未能这样做。任何形式的帮助表示赞赏。感谢

server.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res) {
    res.sendFile(__dirname + '/index.html');
});

var nsp = io.of('/chatroom');
nsp.on('connection', function(socket) {
   console.log('ChatRoom namespace is created');
//   socket.on('hi',function(data){
//     console.log("Hi incoming")
//    })
  // nsp.emit('hi', 'Hello everyone!');
  io.of('/chatroom').on('connection', function(socket){
    socket.on('hi',function(data){
        //console.log("Response to HI event")
        socket.join('chat1',function(data){
            console.log("Chat room 1 connected")
        });
    })

});



});


http.listen(3000, function() {
   console.log('listening on localhost:3000');
});

的index.html

<!DOCTYPE html>
<html>
   <head>
      <title>Hello world</title>
   </head>
   <style>
       .button1,.button2,.button3
       {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer; 
    }
   </style>
   <script src="http://code.jquery.com/jquery-latest.min.js"></script>
   <script src = "/socket.io/socket.io.js"></script>

   <script>
     $(function () {
      var socket = io('/chatroom');
      var $button1= $('.button1');
      var $button2= $('.button2');
      var $button3= $('.button3');
      $button1.click(function(data){
        alert("clicked")
        socket.emit('hi');

      })
    //   socket.emit('hi',function(data) {
    //      document.body.innerHTML = '';
    //      document.write(data);
    //   });
  });
   </script>
 <input type="button" class="button1" value="Chat Room 1">
 <input type="button" class="button2" value="Chat Room 2">
 <input type="button" class="button3" value="Chat Room 3">
   <body></body>
</html>

Answer 1

在服务器端，它更简单，您只需在通过io.on('connection', ... )访问它后将每个套接字绑定到其事件处理程序。

如果io.use(...)某些身份验证中间件，通常此连接步骤可能首先使用用户信息填充套接字对象。这样你就可以控制套接字可以加入哪个聊天室服务器的connect功能。

使用下面的代码，任何客户都可以加入任何聊天室：

// ./server.js
// [ imports...] 

// subscribe to the nth chatroom on ('hi', n)
const connect = socket => socket
    .on('hi', n => socket.join(`chat${n}`);

// use this handler in the '/chatroom' namespace
io.of('/chatroom').on('connection', connect);

在客户端，没有太大的困难，但作为一个例子：（我不认识jQuery）

// ./buttons.js 
(function () {
    var socket = io('/chatroom');
    var div = document.getElementById('myButtons');

    // loop over 3 buttons
    [1,2,3]
        .map(button)
        .forEach(b => div.appendChild(b));

    // return the click handler of the nth button
    function click (n) {
        return () => socket.emit('hi', `chat${n}`);
    }        

    // create the nth button
    function button (n) {
        var b = document.createElement('button');
        b.className = `.button${n}`;
        b.text = `join ${n}`;
        b.onclick = click(n);
        return b;
    }
})();

希望这有帮助，使用这个基本的HTML它应该工作！

// ./index.html

<html>
    <head>
        <script src="/socket.io/socket.io.js"></script>
    </head>
    <body>
        <div id="myButtons">
        </div>
        <script src="/buttons.js"></script>
    </body>
</html>

如何回复连接到特定的聊天室？

1 个答案: