WebSocket实现一对一聊天详解

一、WebSocket介绍

WebSocket是一种在单个TCP连接上进行全双工通信的协议。它在客户端和服务器之间建立了一条持久连接，可以支持服务端主动向客户端推送数据，实现了实时通讯。相比较HTTP协议，WebSocket能够降低客户端与服务器之间的数据交换延迟。WebSocket协议类似于Socket，但是能够与HTTP协议共用同一个端口。它与HTTP协议一样，都是应用层协议，基于TCP协议之上，但是它比HTTP协议更加轻量、更加简单，是现代互联网应用中不可或缺的一部分。

二、WebSocket使用场景

目前，WebSocket被广泛应用于Web即时通讯、在线游戏、大屏展示、行情推送等领域，在实时通讯方面尤其受到重视。传统的HTTP协议的痛点在于客户端向服务器发送请求后，服务器会立即响应结果并且关闭连接，这样如果有新的数据需要返回就需要重新建立连接，造成了较大的性能损耗。而WebSocket协议则通过建立一条持久连接，实现了实时双向通信，解决了这个问题。

三、实现一对一聊天

下面我们来介绍如何使用WebSocket协议实现一对一聊天功能。首先需要明确的是，要实现一对一聊天功能，需要精准的建立双方的身份和联系方式，这可以通过类似注册、登录这样的流程实现。这里不涉及这些流程，我们主要关注聊天功能实现。

四、建立WebSocket连接

在HTML中，我们可以使用WebSocket API来建立与服务端的连接。以下代码演示了如何在JavaScript中创建WebSocket对象。

let ws = new WebSocket("wss://example.com/chat");

其中，wss表示使用HTTPS的WebSocket协议，example.com是指服务器的域名或IP地址，chat是指服务端的WebSocket处理程序名称。

五、实现后端WebSocket服务器

在服务端，我们需要实现WebSocket的处理程序，接收来自客户端的连接请求，并保持连接。当需要发送数据时，通过WebSocket将数据发送给所有连接着的客户端。以下是示例代码：

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

WebSocket.Server是一个WebSocket服务器类。通过调用其构造函数，我们可以指定要监听的端口。在此示例中，我们将WebSocket.Server监听在8080端口上。

在处理程序内部，当有客户端连接到WebSocket.Server时，’connection’事件将会被触发。连接建立之后，我们可以对消息进行监听。当接收到任何消息时，我们会将消息发送给所有连接着的客户端。

六、实现前端WebSocket客户端

在前端中，我们可以使用WebSocket API来建立对WebSocket服务器的连接。以下是示例代码：

let ws = new WebSocket("wss://example.com/chat");

ws.onopen = function() {
  ws.send('Hello, Server!');
};

ws.onmessage = function(e) {
  console.log('Received message: ' + e.data);
};

当WebSocket连接打开时，’open’事件将被触发。我们可以在此时向服务器发送一条消息。在收到来自服务器的消息时，’message’事件将会被触发，我们可以在事件处理程序中处理收到的消息。

七、实现一对一聊天功能

现在我们已经建立了WebSocket服务器和客户端的连接，接下来我们可以通过这个连接实现一对一聊天功能。下面是一对一聊天功能的大致实现：

let ws = new WebSocket("wss://example.com/chat");

ws.onopen = function() {
  ws.send('Hello, Server!');
};

ws.onmessage = function(e) {
  console.log('Received message: ' + e.data);
  
  //将接收到的消息显示到页面上
  let messageEl = document.createElement('div');
  messageEl.innerText = e.data;
  document.getElementById('messages').appendChild(messageEl);
};

let sendBtn = document.getElementById('send');
sendBtn.onclick = function() {
  let message = document.getElementById('message').value;
  
  //将消息发送给对方
  ws.send(message);
  
  //将自己发送的消息显示到页面上
  let messageEl = document.createElement('div');
  messageEl.innerText = message;
  document.getElementById('messages').appendChild(messageEl);
};

首先，我们监听页面上的send按钮的点击事件，当点击按钮时，我们获取输入框中的文本，然后通过WebSocket将文本发送给对方。将自己发送的消息显示到页面上，可以实现类似于QQ一样的消息框。当接收到对方的消息时，我们也将消息显示到页面上。

八、总结

本文介绍了WebSocket协议的基本概念和使用方法，并且以一对一聊天为例详细介绍了如何使用WebSocket实现聊天功能。有了WebSocket，我们可以实现实时双向通信，极大地提升了Web应用的易用性和性能。WebSocket的应用场景不仅局限于聊天，还包括游戏、行情推送、在线投票等。希望本文能对使用WebSocket协议开发Web应用的同学们有所帮助。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/240874.html