这个案例的核心是一个实时消息推送系统。想象一下，用户在网页上输入消息，点击发送后，服务器立即接收并广播给所有连接的客户端，无需手动刷新页面。为了实现这个功能，我选择了纯前端JavaScript配合Node.js后端，因为WebSocket协议在现代浏览器中有原生支持，而Node.js的ws库能快速搭建服务端环境。
先从前端代码开始。在HTML中，我创建了一个简单的界面：一个消息显示区域、一个输入框和一个发送按钮。代码如下：
接下来是关键的JavaScript部分。在client.js文件中，我初始化了WebSocket连接，并处理了消息的发送和接收。注意，这里的WebSocket URL指向本地服务器的8080端口，实际部署时需要替换为真实地址。
这段代码中，onopen事件处理连接成功后的逻辑，比如显示提示信息；onmessage负责接收服务器推送的数据，并动态更新到页面上；sendMessage函数则获取输入内容，通过WebSocket发送给服务器。为了提升用户体验，我还加了自动滚动功能，确保新消息总是可见。
现在转到服务器端。我用Node.js和ws库写了一个简单的WebSocket服务器。首先，通过npm安装ws：。然后创建server.js文件：
服务器启动后，会监听8080端口。每当有客户端连接，就会触发connection事件，并发送一条欢迎消息。当收到客户端发来的消息时，服务器会遍历所有活跃连接，将消息广播出去。这里用了wss.clients来管理所有客户端，确保只有处于OPEN状态的连接才会接收数据。
在实际测试中，我打开了多个浏览器标签页模拟多用户场景。结果很理想：任意一个标签页发送消息，其他页面都能实时显示，延迟几乎为零。相比传统的AJAX轮询，WebSocket减少了不必要的HTTP请求，节省了带宽，而且响应更快。
当然，这个案例还有优化空间。比如，可以加入用户身份识别，让消息显示发送者名称；或者处理连接异常，比如网络中断时自动重连。另外，在生产环境中，可能需要使用WSS（WebSocket Secure）来加密通信，避免数据泄露。
总的来说，WebSocket为实时Web应用提供了强大的底层支持。通过这个简单案例，我们可以看到它如何简化开发流程，提升性能。如果你正在做在线游戏、实时监控或协作工具，不妨试试WebSocket，它可能会成为你的得力助手。