引言

在实时通信的需求日益增加的今天，WebSocket作为一种新兴的网络协议，成为了开发者们的热门选择。

本文将带你了解WebSocket的背景、原理以及如何用它快速搭建一个简单的聊天室。

WebSocket 的起源

在WebSocket出现之前，开发者通常依赖于Ajax技术来实现实时通信。主要采用短轮询和长轮询这两种方式来处理服务器端消息推送。当我们需要在服务端数据变更时，及时通知客户端时，短轮询和长轮询都存在一些显著的缺陷：

HTTP协议的请求头较大，造成带宽浪费。
短轮询频繁请求服务器，增加了服务器负担，即使是长轮询，面对大量客户端时，仍会造成压力。HTML5的WebSocket协议应运而生，能够更加高效地利用服务器资源和带宽，实时进行双向通信。

WebSocket 概述

WebSocket是一种网络传输协议，允许在单一的TCP连接上进行全双工通信。它位于OSI模型的应用层，使得客户端和服务器之间的数据交换变得更为便捷，允许服务器主动向客户端推送数据。

WebSocket 的优缺点

优点

实时性：提供双向通信，适合实时聊天和在线协作等应用。

减少延迟：相比于轮询方式，WebSocket消除了频繁建立和关闭连接所带来的延迟。

低数据开销：WebSocket的数据帧相较于HTTP请求较小，减少了通信开销。

高效的资源使用：长连接特性使得服务器可以处理更多的并发连接。

易于跨域通信：与其他跨域通信方式相比，WebSocket更易实现。

缺点

连接维护：长时间保持连接可能会增加服务器和客户端的负担。

不适用所有场景：对于简单的请求-响应模式，HTTP请求可能更合适。

实现复杂性：WebSocket的管理相对复杂，尤其是在处理连接状态时。

WebSocket 的适用场景

实时聊天：为即时通讯和聊天室提供理想解决方案。
在线协作：适合多用户共同编辑文档或绘图。
实时数据展示：适用于需要实时数据更新的应用，如股票行情监控。
在线游戏：能够处理低延迟和高并发的需求。
消息推送：向客户端主动发送更新或通知。

浏览器对 WebSocket 的支持

目前，大多数主流浏览器都支持WebSocket，使得在各类项目中使用这一技术变得可行和安全。

WebSocket 的通信原理

#01-连接建立

WebSocket协议依赖于TCP协议，通过HTTP/1.1的101状态码实现连接握手。客户端向服务器发送一个 HTTP GET请求，请求的路径为WebSocket地址，并附带特殊的头字段以指示希望升级到WebSocket协议。服务器在响应时返回HTTP 101状态码，表示协议切换成功。

#02-数据传输

WebSocket的消息可以分为多个数据帧进行传输。发送方将消息切割成若干帧并发送，接收方再将这些帧组装回完整的消息。

#03-连接维持与关闭

在连接建立后，为了避免由于网络问题造成的连接中断，可以定期发送心跳包检测连接状态。关闭连接时，客户端可以发送关闭请求，服务端在确认后进行响应。

#04-实现简易聊天室

下面是一个基于WebSocket的简易聊天室实例，用户可以通过网页加入并进行聊天。

#05-前端代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebSocket 聊天室</title> </head> <body> <div id="chat"></div> <input type="text" id="messageInput" placeholder="输入您的消息"> <button onclick="sendMessage()">发送</button> <script> // 创建 WebSocket 连接const socket = new WebSocket('ws://localhost:8888'); // 当连接打开时的事件处理socket.onopen = (event) => { console.log('WebSocket 连接已打开:', event); }; // 接收到消息时的事件处理socket.onmessage = (event) => { const messageDiv = document.getElementById('chat'); const messageParagraph = document.createElement('p'); messageParagraph.textContent = event.data; // 显示接收到的消息messageDiv.appendChild(messageParagraph);}; // 当连接关闭时的事件处理socket.onclose = (event) => { console.log('WebSocket 连接已关闭:', event); }; // 发送消息的函数function sendMessage() { const messageInput = document.getElementById('messageInput'); const message = messageInput.value; // 获取输入框中的消息socket.send(message); // 发送消息messageInput.value = ''; // 清空输入框}</script> </body> </html>

#06-后端代码（Java）

package itfdz; import org.java_websocket.WebSocket; import org.java_websocket.handshake.ClientHandshake; import org.java_websocket.server.WebSocketServer; import java.net.InetSocketAddress; public class ChatServer extends WebSocketServer { { public ChatServer(int port) { super(new InetSocketAddress(port)); // 初始化服务器，绑定端口} // 新连接时的处理@Override public void onOpen(WebSocket conn, ClientHandshake handshake) { System.out.println("新连接来自: " + conn.getRemoteSocketAddress().getAddress().getHostAddress()); } // 连接关闭时的处理@Override public void onClose(WebSocket conn, int code, String reason, boolean remote) System.out.println("关闭连接: " + conn.getRemoteSocketAddress().getAddress().getHostAddress()); } // 接收到消息时的处理@Override public void onMessage(WebSocket conn, String message) { System.out.println("收到消息: " + message); broadcast(message); // 广播消息到所有连接的客户端} // 发生错误时的处理@Override public void onError(WebSocket conn, Exception ex) { System.err.println("连接错误: " + ex.getMessage()); } // 服务器启动时的处理@Override public void onStart() { System.out.println("WebSocket 服务器已启动"); } } public static void main(String[] args) { int port = 8888; // 设定端口号ChatServer server = new ChatServer(port); // 创建服务器实例server.start(); // 启动服务器System.out.println("WebSocket 服务器在端口 " + port + " 上运行"); }

#07-效果如图所示

总结

WebSocket是一种高效的实时双向通信协议，适用于各种需要即时数据交互的场景，如聊天应用、协作工具等。

个人简介

“ 👋 大家好，我是枫哥，一名Java后端开发者！我热衷于探索新技术，并在我的微信公众号上分享关于Java 生态和后端开发的知识。欢迎关注我的公众号，期待与你一起探讨技术的无穷可能！” 目前专注于Java技术分享，覆盖春招、秋招、社招和跳槽相关内容，并提供一对一带徒学习服务。加入学徒计划，即可享受内推机会和优质资源，签订协议确保就业无忧。此外，我们还推出了‘Java跳槽网’，为你的求职之路提供全方位支持，助你快速找到理想工作！

ITPub博客

3分钟教你使用 WebSocket 构建自己的聊天室

最新文章