如何在socket.io中显示所有客户端,包括连接到房间的发件人?

时间:2018-06-01 22:29:13

标签: node.js socket.io

以下是连接名为 chat1 的会议室的代码。通过单击 index.html 活动用户窗口中的聊天室1 按钮,我可以显示除发件人之外的已连接客户端。我想显示发件人的姓名也会与其他客户一起显示在活跃用户窗口中。

socket.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
    usernames1 = [];
    usernames2 = [];
    usernames3 = [];
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){ console.log("Connection establied")
socket.on('new user1',function(data, callback){
    if(usernames1.indexOf(data)!=-1){

        callback(false);
    }
    else
    { 
        callback(true);
            socket.username = data;
            usernames1.push(socket.username);
            socket.join('chat1',function(data)
            {
                console.log("In username "+usernames1)
                console.log("\nIn socket.username "+socket.username+"\n")
                updateUsernames();
            });


    }
    // socket.join('chat1',function(data){
    //     console.log("Chat room 1 connected")
    // });
})

function updateUsernames(){
    console.log(usernames1);
    socket.in('chat1').emit('comeon',usernames1)
}
});

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

的index.html

<!DOCTYPE html>
<html>
   <head>
      <title>Hello world</title>
   </head>
   <style>
    #inp{
      height:30px;
            border:solid 1px #ccc;
    }
       .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; 
    }
    #mainWrapper{
            display:none;
        }
    #chatWrapper{
            float:left;
            border:1px #ccc solid;
            border-radius:10px;
            background:#f4f4f4;
            padding:10px;
        }
    #chatWindow{
            height:300px;
        }
    #userWrapper{
            float:left;
            border:1px #ccc solid;
            border-radius:10px;
            background:#f4f4f4;
            padding:10px;
            margin-left:20px;
            width:150px;
            max-height:200px;
        }
    body{
            background:#f9f9f9;
        }

    #form2,#form1,#form3{
      display: inline-block;
    margin-top:30px;
    margin-left: 5%;
    padding-left: 12px;
    height: 140px;
    width: 325px;
    border:solid rgb(0, 0, 0)

    }
    error{
      border:#101999
    }

  </style>
   <script src="http://code.jquery.com/jquery-latest.min.js"></script>
   <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
      </script>


   <script src = "/socket.io/socket.io.js"></script>

   <script>
     $(function () {
      var socket = io('/chatroom');
      var $form1= $('#form1');
      var $form2= $('#form2');
      var $form3= $('#form3');
      var $username1=$('#username1');
      var $username2=$('#username2');
      var $username3=$('#username3')
      var $users = $('#users');
      var $error = $('#error');

      $form1.submit(function(e){
        e.preventDefault();
        socket.emit('new user1', $username1.val(), function(data){
            if(data){
             // alert("Clicked")
        $('.button1').hide();
        $('.button2').hide();
        $('.button3').hide();

        $('#mainWrapper').show();
        $form1.hide();
        $form2.hide();
        $form3.hide();

            }
            else 
            {
             $('#error1 ').html("UserName is taken").effect("shake");
             $('#error1 ').hide()
                        }
        });
      });
      $form2.submit(function(e){
        e.preventDefault();
        socket.emit('new user2', $username.val(), function(data){
            if(data){
             // alert("Clicked")
        $('.button1').hide();
        $('.button2').hide();
        $('.button3').hide();

        $('#mainWrapper').show();
        $form1.hide();
        $form2.hide();
        $form3.hide();

            }
            else 
            {
             $('#error1').html("UserName is taken").effect("shake");
             $('#error1').hide()
                        }
        });
      });

      $form3.submit(function(e){
        e.preventDefault();
        $('.button1').hide();
        $('.button2').hide();
        $('.button3').hide();
        $('#mainWrapper').show();
        $form1.hide();
        $form2.hide();
        $form3.hide();
        socket.emit('ch3');

      });
      socket.on('comeon', function(data){
        alert("reached here")
                    var html = '';
                    for(i = 0; i < data.length; i++){
                        html += data[i] + '<br>';
          }

         console.log("Reached in usernames1")
         console.log(data)
                    $users.html(html);
        });
        socket.on('comeon2', function(data){
        alert("reached here")
                    var html = '';
                    for(i = 0; i < data.length; i++){
                        html += data[i] + '<br>';
          }

         console.log("Reached in usernames1")
                    $users.html(html);
                });

      })




   </script>        <div id="mainWrapper">
            <h2>ChatIO</h2>

   <body>
    <div id="chatWrapper">
      <div id="chatWindow"></div>
      <form id="messageForm">
        <input id="inp" type="text" size="35" id="message" placeholder="Say Something...">
        <input id="inp" type="submit" value="Submit">
      </form>
      <button type="submit">Leave Room</button>
    </div>

    <div id="userWrapper"><strong>List of Active users</strong>
      <div id="users"></div>
    </div>
  </div>
  <div id="namesWrapper">
    <div id="error1"></div>
<form id="form1">

    Enter a username<input type="text" size="35" id="username1">
  <input type="submit" class="button1" value="Chat Room 1">
</form></div><br>
<div id="namesWrapper">
    <div id="error2"></div>
<form id="form2">
       Enter a username<input type="text" size="35" id="username2">
  <input type="submit" class="button2" value="Chat Room 2">
</form></div><br>
<div id="namesWrapper">
    <div id="error3"></div>
<form id="form3">
    Enter a username<input type="text" size="35" id="username3">
  <input type="submit" class="button3" value="Chat Room 3">
</form></div>

   </body>
</html>

0 个答案:

没有答案