socket.io之六_socket.nickname-CSDN博客

本文链接：https://blog.csdn.net/qq_39243221/article/details/83144173

socket.io实现简单的聊天室：

启动本地服务：

//创建http的server
var app=require("http").createServer();
var io=require('socket.io')(app)


//定义端口号
var port=8003;
var clientCount=0;

app.listen(port)
io.on('connection',function(socket){
    clientCount++;
    //将nickname放在socket里
    socket.nickname='user'+clientCount;
    //广播，socket.emit等价于客户端的发送，io.emit进行广播
    io.emit('enter',socket.nickname+ 'comes in')
    //监听message事件
    socket.on('message',function(str){
        io.emit('message',socket.nickname+' syas:'+str)
    })

    //监听客户断开事件-disconnect
    socket.on('disconnect',function(){
        io.emit('leave',socket.nickname+' left');
    })
})

//server启动的时候打印
console.log("websocket3 server listening on port"+port)

显示页面：


<html>
  <head>
    <title>websocket</title>
    <script src="socket.io.js"></script>
  </head>
  <body>
    <h1>Chart Room</h1>
    <input id="sendTxt" type="text"/>
    <button id="sendBtn">发送</button>
    <script type="text/javascript">
      var socket=io("ws://localhost:8003");
      function showMessage(str,type){
          var div=document.createElement('div');
          div.innerHTML=str;
          if(type=="enter"){
            div.style.color="blue";
          }else if(type=="leave"){
              div.style.color="red";
          }
          document.body.appendChild(div);
      }
      document.getElementById("sendBtn").onclick=function(){
          var txt=document.getElementById("sendTxt").value;
          if(txt){
              //点击时发送消息
              socket.emit('message',txt);
          }
      }

      //监听发送的消息，然后显示消息
      socket.on('enter',function(data){
          showMessage(data,'enter');
       });
      socket.on('message',function(data){
          showMessage(data,'message');
      });

      socket.on('leave',function(data){
          showMessage(data,'leave');
      })
    </script>
  </body>
</html>

页面：