前言：

本篇是用了nodejs-websocket来实现服务端的socket服务器的，比较偏向于原生，后面有时间再去研究socket.IO框架。这个聊天室比较简陋，只实现了最基本的功能，结构和代码都比较简单。
nodejs-websocket

1.构建websocket的node服务端

（1）安装nodejs-websocket

npm install nodejs-websocket —save

目录结构：
image.png

（2）编写服务端代码

这里直接给了，比较简单，可以直接看注释

聊天室需求： 01-能多个用户登录，每一个connect对象表示一个用户接入 02-用户进入（离开）聊天室后，系统广播用户进入（离开）聊天室 03-某个用户发言，消息传给服务器，服务器再广播给聊天室内的人 04-定义用户的三个状态，每个状态传给客户端展示不同的消息颜色： 进入聊天室为0， 退出聊天室为1， 用户发送消息为2

  1. const ws = require("nodejs-websocket")
  2. const PORT = 8080
  3. const TYPE_ENTER = 0
  4. const TYPE_EXIT = 1
  5. const TYPE_MSG = 2
  7. // 聊天室需求：
  8. // 01-能多个用户登录，每一个connect对象表示一个用户接入
  9. // 02-用户进入（离开）聊天室后，系统广播用户进入（离开）聊天室
  10. // 03-某个用户发言，消息传给服务器，服务器再广播给聊天室内的人
  11. // 04-定义用户的三个状态，每个状态传给客户端展示不同的消息颜色：
  12. //    进入聊天室为0，退出聊天室为1，用户发送消息为2
  14. // count定义为用户的数量
  15. let count = 0
  16. const server = ws.createServer((connect) => {
  17.   // 新用户连接时触发
  18.   {
  19.     console.log("新用户连接成功");
  20.     // 用户数量加一
  21.     count++
  22.     connect.name = `用户${count}`
  23.     // 用户名最初时发给用户，后面不再发送
  24.     connect.sendText(JSON.stringify({
  25.       type: "name",
  26.       username: connect.name
  27.     }))
  28.     // 用户进入聊天室了，系统广播一次
  29.     let enterMsg = JSON.stringify(createMsg(TYPE_ENTER, `${connect.name}进入了聊天室`))
  30.     broadcast(enterMsg)
  31.   }
  33.   // 当用户传入数据时，text事件会被触发
  34.   connect.on("text", (msg) => {
  35.     console.log("收到消息：", msg);
  36.     // connect.sendText(msg)
  37.     // 有用户发送消息了，广播给聊天室每一个用户
  38.     let userMsg = JSON.stringify(createMsg(TYPE_MSG, `${connect.name}：${msg}`))
  39.     broadcast(userMsg)
  40.   })
  42.   // 注册close，用户连接断开时自动触发(用户关闭页面)
  43.   connect.on("close", () => {
  44.     // 用户退出聊天室了，系统广播一次
  45.     let exitMsg = JSON.stringify(createMsg(TYPE_EXIT, `${connect.name}退出了聊天室`))
  46.     broadcast(exitMsg)
  47.     console.log("连接断开啦！！！");
  48.   })
  50.   // 注册error，处理用户的错误信息(连接断开时会有错误处理)
  51.   connect.on("error", () => {
  52.     console.log("连接异常");
  53.   })
  54. })
  56. // 广播函数
  57. function broadcast(msg) {
  58.   server.connections.forEach(function (connect) {
  59.     connect.sendText(msg)
  60.   })
  61. }
  63. // 返回的消息对象
  64. function createMsg(type, content) {
  65.   return {
  66.     type,
  67.     content,
  68.     time: new Date().toLocaleDateString()
  69.   }
  70. }
  72. server.listen(PORT, () => {
  73.   console.log("websocket服务启动成功，监听端口：", PORT);
  74. })

2.客户端H5代码的编写

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>WebSocket</title>
  9.     <style>
  10.       .msg-box {
  11.         width: 30rem;
  12.         height: 30rem;
  13.         margin-top: .5rem;
  14.         padding: .5rem;
  15.         border: 1px solid brown;
  16.         border-radius: .5rem;
  17.         font-size: 1.2rem;
  18.       }
  19.     </style>
  20.   </head>
  22.   <body>
  23.     <h2 class="username"></h2>
  24.     <!-- 输入消息 -->
  25.     <input type="text" placeholder="输入要发送的消息" />
  26.     <!-- 发送消息 -->
  27.     <button class="sendMsg">发送消息</button>
  28.     <!-- 退出聊天室 -->
  29.     <button class="exitRoom">退出聊天室</button>
  30.     <!-- 接收消息框 -->
  31.     <div class="msg-box"></div>
  32.   </body>
  34.   <script>
  35.     let username = document.querySelector(".username")
  36.     let input = document.querySelector("input")
  37.     let sendMsg = document.querySelector(".sendMsg")
  38.     let exitRoom = document.querySelector(".exitRoom")
  39.     let msgBox = document.querySelector(".msg-box")
  40.     // 01-创建一个WebSocket对象(这个服务地址，你发送什么，他就返回什么)
  41.     let ws = new WebSocket("ws://localhost:8080")
  42.     // 02-onopen，与websocket服务器连接成功时触发
  43.     ws.addEventListener('open', () => {
  44.       console.log('websocket connect is open');
  45.     })
  46.     // 03-onmessage，监听服务器传入的数据，服务器发送消息时触发
  47.     ws.addEventListener('message', (e) => {
  48.       // JSON.parse反序列化后端传过来的JSON
  49.       let data = JSON.parse(e.data)
  51.       // 判断data.type是否是用户名
  52.       if (data.type === "name") {
  53.         // 是用户名，显示给用户
  54.         username.innerHTML = data.username
  55.       } else {
  56.         // 不是用户名，则解析消息数据
  57.         let { name, type, content, time } = data
  59.         // 每条消息创建一个div插入到box内
  60.         let newMsg = document.createElement("div")
  61.         newMsg.innerHTML = `${content} - ${time}`
  62.         // 判断消息的类型，来转变不同的颜色
  63.         if (type === 0) {
  64.           newMsg.style.color = "green"
  65.         } else if (type === 1) {
  66.           newMsg.style.color = "red"
  67.         } else {
  68.           newMsg.style.color = "skyblue"
  69.         }
  70.         msgBox.appendChild(newMsg)
  71.       }
  72.     })
  74.     // 退出聊天室
  75.     exitRoom.addEventListener('click', () => {
  76.       // 04-close()关闭websocket连接
  77.       ws.close()
  78.       console.log("websocket connect is close");
  79.     })
  81.     // 向服务端发送信息
  82.     sendMsg.addEventListener('click', () => {
  83.       let value = input.value
  84.       ws.send(value)
  85.       console.log("发送成功");
  86.       // 发送完成清空发送框
  87.       input.value = null
  88.     })
  90.   </script>
  92. </html>

3.页面展示

用户进入房间

image.png

用户间发送消息image.png

用户退出房间

用户3和用户1分别退出房间
image.png