正文

从零开始：手把手教你用HTML5 WebSocket实现实时通讯示例

/0 浏览量
1031

前言

在互联网时代，实时通讯已经成为许多应用不可或缺的功能。HTML5 WebSocket 提供了一种在单个 TCP 连接上进行全双工通讯的方式，使得实时数据传输变得简单高效。本文将手把手教你如何从零开始使用 HTML5 WebSocket 实现实时通讯。

环境准备

在开始之前，请确保你的开发环境已经准备好以下工具：

  • 文本编辑器：如 Visual Studio Code、Sublime Text 等。
  • 浏览器：支持 HTML5 的现代浏览器，如 Chrome、Firefox 等。
  • Node.js：用于搭建 WebSocket 服务器。

创建 WebSocket 服务器

首先，我们需要创建一个 WebSocket 服务器。以下是使用 Node.js 和 ws 模块搭建 WebSocket 服务器的示例代码：

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('something from server');
});

保存以上代码为 server.js，并在命令行中运行 node server.js 启动服务器。

创建 WebSocket 客户端

接下来，我们需要创建一个 WebSocket 客户端。以下是使用 HTML5 WebSocket API 创建客户端的示例代码：

<!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>
  <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('messageInput').value;
      ws.send(message);
      document.getElementById('messageInput').value = '';
    }
  </script>
</body>
</html>

将以上代码保存为 client.html，并在浏览器中打开该文件。

测试实时通讯

现在，你可以在浏览器中输入消息，点击发送按钮，然后观察服务器控制台和客户端控制台输出。你可以看到，客户端和服务器之间可以实时传输消息。

总结

通过本文的介绍，你已经学会了如何从零开始使用 HTML5 WebSocket 实现实时通讯。在实际应用中，你可以根据需求对服务器和客户端进行扩展，如添加身份验证、消息加密等。希望本文对你有所帮助！

-- 展开阅读全文 --