您的位置:

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应用的同学们有所帮助。