WebSocket + Node.js实现一对一聊天室

本文将为大家介绍即时通讯技术 WebSocket的基本原理，并且讲解一个基于WebSocket + Node.js实现简易的一对一实时聊天的案例。

WebSocket是一种HTML5提供的全双工通信协议（指可以在同一时间内允许两个设备之间进行双向发送和接收数据的通信协议），用于浏览器与服务器之间的实时通信。

WebSocket基于TCP传输协议，并且复用HTTP的握手通道（基于HTTP的 “keep-alive” 机制，允许在一次TCP连接中传送多个HTTP请求和响应）。建立WebSocket连接时，客户端会向服务器发送一个HTTP请求报文，其中包含升级协议的请求头，服务器在接收到该请求后会返回一个HTTP响应报文，其中包含升级协议的响应头。在收到服务器的响应后，客户端和服务器之间的连接就会升级为WebSocket连接，此时客户端和服务器之间的通信就不再需要使用HTTP协议的请求和响应报文，而是直接进行双向数据传输。因此，可以大大减少建立和断开连接的开销，并且实现更低的延迟和更高的吞吐量。

下面讲解如何使用 WebSocket + Node.js 技术来实现简易版的一对一聊天室效果。

前端代码

1、HTML+CSS代码

<style>
  #box {
    width: 400px;
    height: 200px;
    overflow-y: scroll;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid rgb(156, 152, 152);
    background-color: #f8f4f4;
  }
  /* 放置聊天信息的div，为了消息有左右展示的效率设置了display:flex */
  #chat-window {
    display: flex;
    flex-direction: column;
  }
  #chat-window > div {
    flex-grow: 1;
    padding: 5px;
    max-width: 70%;
  }
  #chat-window > div > div {
    text-align: left;
    word-wrap: break-word;
    padding: 5px;
    border-radius: 5px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  }
  #chat-window > div > span {
    font-size: 12px;
    color: #aaa6a6;
  }
  /* 收到对方发来的消息会动态生成类目为left-message的div标签，并设置左侧展示 */
  .left-message {
    align-self: flex-start;
  }
  
  /* 自己发送消息会动态生成类目为right-message的div标签，并设置右侧展示 */
  .right-message {
    text-align: right;
    align-self: flex-end;
  }
  .left-message div {
    background-color: #fff;
  }
  .right-message div {
    background-color: #4dc86f;
  }
</style>
<body>
  <h3>一对一聊天室</h3>
  <div id="box">
    <div id="chat-window"></div>
  </div>
  <input type="text" id="message" placeholder="输入消息" />
  <button id="send">发送</button> <button id="close">关闭聊天</button>
</body>

说明：

（1）有新的聊天信息会创建新的dom，放入id为”chat-window”的div里，之所以外面还要包裹一个”box”是考虑消息条数过多时，要生成滚动条的效果，所以”box”div设置了固定高度和overflow-y: scroll样式；

（2)聊天效果区分了对方和自己发的消息，模仿一般聊天效果，自己信息会显示右侧，故类名为right-message，对方消息的div标签则类名是left-message，设置弹性盒子，并给自身设置align-self样式来实现左右效果。

页面效果：

2、JS代码


<script>
  const ws = new WebSocket('ws://localhost:8080')
  const sendBtn = document.getElementById('send')
  const closeBtn = document.getElementById('close')
  const messageInput = document.getElementById('message')
  const chatWindow = document.getElementById('chat-window')
  const box = document.getElementById('box')

  ws.onopen = function (event) {
    console.log('连接成功')
  })
  
  // 点击发送按钮时，在点击事件里使用ws.send()传我的消息给服务器
  sendBtn.onclick = function (event) {
    const message = messageInput.value
    ws.send(message)  
    messageInput.value = ''
    chatWindow.innerHTML += `<div class="right-message"><span>我</span><div>${message}</div></div>`
    box.scrollTop = box.scrollHeight
  }
  
  // 给ws绑定message事件，当服务器接收对方发送的消息并传给我时会触发，event.data就是对方的消息内容
  ws.onmessage = function (event) {
    const message = event.data
    chatWindow.innerHTML += `<div class="left-message"><span>对方</span><div>${message}</div></div>`
    box.scrollTop = box.scrollHeight
  }
  
  // 点击关闭聊天，将中断连接，我再发送信息，对方将不能收到
  closeBtn.onclick = function () {
    ws.close()
  }
</script>

说明：
（1）首先通过new WebSocket(服务器地址) 进行WebSocket连接，然后创建ws.onopen事件函数，在函数里验证是否连接成功；

（2）给发送按钮添加点击事件，事件函数里要获取发送的消息值，然后ws.send()方法把消息传递给服务器，同时创建dom插入页面，展示我发送的消息；

（3）给ws绑定message事件，这样我就能实时接收对方发送给服务器，服务器再传递给我的消息，获取消息信息，创建dom插入页面当中；

（4）给关闭聊天按钮添加了点击事件，点击关闭将中断该用户的WebSocket连接。

后端Node.js代码

const WebSocket = require('ws')
const server = new WebSocket.Server({ port: 8080 })

let users = new Set()

// 创建连接事件函数
server.on('connection', (ws) => {
  users.add(ws)
  
  // 创建接收客户端消息的事件函数
  ws.on('message', (message) => {
    // 此时消息message为二进制格式，需要转成字符串
    message = message.toString()
    users.forEach(function (user) {
      if (user !== ws) {
        user.send(message)
      }
    })
  })

  ws.on('close', () => {
    users.delete(ws)
  })
})

该后端代码和上面的建议案例基本一致，故不再说明。

网页效果展示

启动WebSocket服务器后，打开两个客户端窗口，分别输入文字，实现实时沟通效果。

关闭实时聊天后，终止连接，再次发送信息，对方无法收到效果。

总结

WebSocket技术是一种能够实现全双工通信的协议，它使得客户端和服务器能够建立持久性连接并实现实时的数据传输和交互，从而成为了实现即时通讯的一种重要手段。本文简要介绍了WebSocket技术的基本概念和简单实现，但要想更好地应用该技术，需要进行更多的配置和学习。如果大家对WebSocket技术感兴趣，可以再做进一步的深入研究和学习。