正文

掌握HTML5 WebSocket：轻松上手实时通信实战示例

/0 浏览量
0408

了解WebSocket

WebSocket是一种在单个TCP连接上进行全双工通讯的协议。它允许服务器和客户端之间进行实时、双向通信，而无需轮询或长轮询等传统方法。HTML5提供了对WebSocket的原生支持，使得开发实时通信应用变得更加容易。

WebSocket工作原理

传统的HTTP协议是单向请求-响应的，客户端发送请求，服务器响应请求，然后连接关闭。而WebSocket允许建立一个持久的连接，在这个连接上，客户端和服务器可以随时发送消息。

建立连接

  1. 握手：WebSocket连接是通过HTTP握手建立的。客户端发送一个特殊的HTTP请求，请求服务器升级到WebSocket协议。
  2. 服务器响应：如果服务器支持WebSocket，它会响应一个特殊的HTTP状态码（101 Switching Protocols），并关闭旧的HTTP连接。
  3. 建立WebSocket连接：一旦握手成功，客户端和服务器就可以在持久的连接上发送和接收消息。

实战示例：使用HTML5和JavaScript创建WebSocket客户端

以下是一个简单的WebSocket客户端示例，使用HTML5和JavaScript实现。

1. 创建HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket客户端</title>
</head>
<body>
    <h1>WebSocket客户端</h1>
    <input type="text" id="messageInput" placeholder="输入消息">
    <button onclick="sendMessage()">发送消息</button>
    <div id="messages"></div>

    <script src="client.js"></script>
</body>
</html>

2. 编写JavaScript代码

在client.js文件中，编写以下代码：

// 创建WebSocket连接
const socket = new WebSocket('ws://localhost:8080');

// 监听连接打开事件
socket.onopen = function(event) {
    console.log('连接已打开');
};

// 监听消息接收事件
socket.onmessage = function(event) {
    const messagesDiv = document.getElementById('messages');
    messagesDiv.innerHTML += `<p>${event.data}</p>`;
};

// 发送消息
function sendMessage() {
    const messageInput = document.getElementById('messageInput');
    const message = messageInput.value;
    socket.send(message);
    messageInput.value = '';
}

3. 编写WebSocket服务器代码

可以使用Node.js和ws库创建WebSocket服务器。以下是一个简单的示例：

const WebSocket = require('ws');

// 创建WebSocket服务器
const wss = new WebSocket.Server({ port: 8080 });

// 监听连接事件
wss.on('connection', function connection(ws) {
    ws.on('message', function incoming(message) {
        console.log('received: %s', message);
    });

    ws.send('连接成功！');
});

总结

通过以上实战示例，你可以了解到如何使用HTML5和JavaScript创建WebSocket客户端和服务器。WebSocket在实时通信应用中有着广泛的应用，例如在线聊天、实时游戏、股票交易等。希望这个示例能帮助你轻松上手WebSocket，并在实际项目中发挥其优势。

-- 展开阅读全文 --