正文

实战教学：简单易懂的HTML5 WebSocket编程实例教程

/0 浏览量
0925

前言

WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议。它允许服务器和客户端之间进行实时、双向的数据交换。HTML5 提供了对 WebSocket 的原生支持，使得开发实时应用变得更加简单。本文将带你一步步通过一个简单的实例来学习 HTML5 WebSocket 编程。

准备工作

在开始之前，请确保你的环境中已经安装了以下工具：

  • 一个支持 HTML5 的现代浏览器（如 Chrome、Firefox 或 Edge）
  • 一个文本编辑器（如 Visual Studio Code 或 Sublime Text）
  • Node.js 和 npm（用于创建简单的 WebSocket 服务器）

创建 WebSocket 服务器

首先，我们需要创建一个简单的 WebSocket 服务器。这里我们使用 Node.js 和 ws 模块来实现。

  1. 安装 Node.js 和 npm。
  2. 创建一个名为 server.js 的文件，并添加以下代码：
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);
  });

  ws.send('Hello, client!');
});
  1. 在命令行中运行 node server.js 启动服务器。

创建 WebSocket 客户端

接下来，我们需要创建一个 WebSocket 客户端来与服务器进行通信。

  1. 创建一个名为 index.html 的文件，并添加以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WebSocket 客户端</title>
</head>
<body>
  <h1>WebSocket 客户端</h1>
  <input type="text" id="message" placeholder="输入消息">
  <button onclick="sendMessage()">发送消息</button>
  <script>
    const ws = new WebSocket('ws://localhost:8080');

    ws.onopen = function() {
      console.log('连接成功！');
    };

    ws.onmessage = function(event) {
      console.log('收到服务器消息：' + event.data);
    };

    ws.onerror = function() {
      console.log('WebSocket 错误！');
    };

    ws.onclose = function() {
      console.log('连接关闭！');
    };

    function sendMessage() {
      const message = document.getElementById('message').value;
      ws.send(message);
      document.getElementById('message').value = '';
    }
  </script>
</body>
</html>
  1. 在浏览器中打开 index.html 文件。

测试 WebSocket 连接

  1. 在输入框中输入一条消息，然后点击“发送消息”按钮。
  2. 你应该在控制台中看到一条消息：“收到服务器消息：Hello, client!”。
  3. 在服务器控制台中，你应该看到一条消息：“received: Hello, client!”。

总结

通过这个简单的实例，你已经学会了如何使用 HTML5 WebSocket 进行编程。你可以根据这个基础，开发出更多复杂的实时应用，如在线聊天、实时游戏等。希望这篇文章能帮助你更好地理解 WebSocket 编程。

-- 展开阅读全文 --