html5中关于socket.io实现一个聊天室的示例代码

互联网 17-10-23

<!DOCTYPE html>  <html>  <head>      <meta charset="UTF-8">      <title>1</title>      <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">      <style>          .user{              color:lightskyblue;              cursor: pointer;          }      </style>  </head>  <body>  <div>      <div>          <div>              <div class="panel panel-default">                  <div>                      <h4>欢迎来老王聊天室</h4>                  </div>                  <div>                      <ul id="messageUl">                        </ul>                  </div>                  <div>                      <div>                          <div>                              <input id="txtMsg" type="text" onkeydown="handleKeyDown(event)">                          </div>                          <div>                              <button class="btn btn-default" onclick="send()">发送                                  <span class="glyphicon glyphicon-send"></span>                              </button>                          </div>                      </div>                  </div>              </div>          </div>          <div>              <div class="panel panel-default">                  <div>                      <h4>在线用户</h4>                  </div>                  <div>                      <ul id="userUl"></ul>                  </div>                  <div>                      <h4 id="onlineUsers">在线人数 0</h4>                  </div>              </div>          </div>      </div>  </div>  <script src="/socket.io/socket.io.js"></script>  <script>      let txtMsg = document.querySelector('#txtMsg');      let onlineUsers = document.querySelector('#onlineUsers');      //此脚本会在window上增加一个io的属性      //http://localhost:8080/=/=空      let socket = io();      //当客户端连接服务器成功之后,向后台发送一个消息，问一下现在有哪些在线用户      socket.on('connect',function(){          socket.emit('users');      });      let messageUl = document.querySelector('#messageUl');      let userUl = document.querySelector('#userUl');      //监听服务器发过来的消息      socket.on('message',function(msgObj){          let li = document.createElement('li');          li.className = 'list-group-item';          li.innerHTML = `${msgObj.username}:${msgObj.content} <span>${new Date(msgObj.createAt).toLocaleString()}</span>`;          messageUl.appendChild(li);      });      socket.on('userList',function(userList){          userUl.innerHTML =  userList.map(item=>(              `<li>${item}</li>`          )).join('');          countUser();      });      socket.on('user-added',function(username){          let li = document.createElement('li');          li.className = 'list-group-item';          li.innerHTML = `<span>${username}</span>`;          userUl.appendChild(li);          countUser();      });      function countUser(){          onlineUsers.innerHTML = `在线人数 ${userUl.children.length}`;      }      //发送事件      function send(){          let content = txtMsg.value;//先拿到聊天的内容          socket.send(content);          txtMsg.value = '';      }      function handleKeyDown(event){          if(event.keyCode == 13)              send();      }      //给父级绑定点击事件 事件委托      //要判断点的是span而非别的元素      userUl.addEventListener('click',function(event){          //如果事件源的类名是user的话          if(event.target.className == 'user'){              let username = event.target.innerHTML;              txtMsg.value = `@${username} `;          }      })  </script>  </body>  </html>      <!--npm i express socket.io -S -->

后台node

let express = require('express');  let path = require('path');  let app = express();  app.get('/',function(req,res){      res.sendFile(path.resolve('index.html'));  });  let server = require('http').createServer(app);  //socket.io是依赖http服务器  let io = require('socket.io')(server);  //声明一个对象，保存所有的客户端用户名和它们的socket对应关系  let clients = {};  //监听客户端的连接，当连接到来的时候执行此回调函数  io.on('connection',function(socket){      //在函数的内部声明一个变量，叫username      let username;      //监听客户端的发过来的消息，当消息发过来的时候执行回调函数      socket.on('message',function(data){          if(username){              //判断是公聊还是私聊              let reg = /@([^ ]+) (.+)/;              let result = data.match(reg);              if(result){//如果result有值则匹配上了                  //此处是私聊                  let toUser = result[1];                  let content = result[2];                  clients[toUser] && clients[toUser].send({                      username,                      content,                      createAt:new Date()                  });              }else{//没匹配上                  //正常发言，向所有的客户端进行广播                  io.emit('message',{                      username,content:data,createAt:new Date()                  });              }          }else{              username = data;//把这个消息当成用户名              //关联起来              clients[username]= socket;              //向所有的客户端广播说有新的用户加入聊天室              io.emit('message',{                  username:'系统',content:`欢迎 ${username} 加入聊天室`,createAt:new Date()              });              //事件的名字可以自定义              io.emit('user-added',username);          }      });      //监听客户端发过来的请求，把用户数组返回      socket.on('users',function(){          let userList = Object.keys(clients);          socket.emit('userList',userList);      });  });  server.listen(8080);    /**   * 1.实现匿名聊天   *   1. 在客户端里连接上服务器   *   2. 给发送按钮绑定点击事件，当点击此按钮的时候先获取文本框的内容，把文本框的内容发送到后台   *   3. 后台服务器把此消息广播给所有的客户端。   *   4. 所有的客户端收到消息后把此消息在ul列表里显示出来   * 2.实现具名聊天   *   1. 当此用户第一次向服务器发消息的时候   *   2. 服务器会判断此客户端的用户名是否设置过，如果没设置的话就把这个消息当成用户名，以后再发消息的话都会以这个作为用户名,如果设置过了就是正常发言   * 3. 私聊   *   1. 点击某个在线用户，点击后会在输入框里出现  @xxx yyy   *   2. 服务收到私聊的请求后会找到xxx对应的客户端向他单个发消息   *   3   *  */

以上就是html5中关于socket.io实现一个聊天室的示例代码的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签： h5