在现代互联网应用中，实时通信变得越来越重要。WebSocket 是一种允许浏览器和服务器之间进行全双工通信的协议，它能够提供比传统 HTTP 请求更高效的实时数据传输。本文将介绍如何使用 WebSocket 来实现简单的客户端与服务器之间的实时通信。
一、了解WebSocket的基本概念
WebSocket 是 HTML5 提供的一项新技术，它打破了传统的 HTTP 请求-响应模式，允许数据在客户端和服务器之间双向流动。这意味着一旦连接建立，双方都可以随时发送信息而无需重新发起请求。
二、设置WebSocket服务器
首先，我们需要一个支持 WebSocket 的服务器环境。这里以 Node.js 和 ws 模块为例来搭建一个简单的 WebSocket 服务器：
1. 安装 Node.js 和 npm（如果尚未安装）。
2. 创建一个新的项目目录，并初始化 npm：
```bash
mkdir websocket-server
cd websocket-server
npm init -y
```
3. 安装 `ws` 模块：
```bash
npm install ws
```
4. 创建一个名为 `server.js` 的文件，编写以下代码：
```javascript
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
console.log("WebSocket server is running on port 8080");
wss.on('connection', (ws) => {
console.log("Client connected");
ws.on('message', (message) => {
console.log(`Received: ${message}`);
ws.send(`Hello, you sent -> ${message}`);
});
ws.on('close', () => {
console.log("Client disconnected");
});
});
```
这段代码启动了一个监听 8080 端口的 WebSocket 服务器，当有客户端连接时，服务器会接收消息并回传给客户端。
三、创建WebSocket客户端
接下来，我们创建一个简单的 HTML 页面作为客户端，用来连接到刚才设置的 WebSocket 服务器：
```html
WebSocket Client
<script>
const socket = new WebSocket('ws://localhost:8080');
socket.onopen = function() {
document.getElementById('response').textContent = 'Connected to server';
};
socket.onmessage = function(event) {
document.getElementById('response').textContent = event.data;
};
socket.onclose = function() {
document.getElementById('response').textContent = 'Disconnected from server';
};
function sendMessage() {
const input = document.getElementById('messageInput');
socket.send(input.value);
input.value = '';
}
</script>
```
这个页面包含了一个输入框和一个按钮，用户可以在输入框中输入文本并点击按钮发送消息到服务器。同时，页面也会显示从服务器接收到的消息。
四、运行应用程序
1. 启动 WebSocket 服务器：
```bash
node server.js
```
2. 打开浏览器访问 `index.html` 文件，确保页面加载正常并且可以成功连接到服务器。
3. 在客户端输入一些文本并发送，观察服务器端是否正确接收并返回消息。
五、总结
通过以上步骤，我们可以看到 WebSocket 提供了一种非常方便的方式来实现实时通信。无论是在线游戏、即时通讯还是股票行情更新等应用场景，WebSocket 都能发挥重要作用。希望本文能帮助你快速上手 WebSocket 技术！
