正文

HTML5 WebSocket入门：实战示例带你轻松掌握实时通信技术

/0 浏览量
0321

简介

WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议。它允许服务器和客户端之间进行实时数据交换，相比传统的 HTTP 请求-响应模式，WebSocket 提供了更高效、更实时的通信方式。HTML5 引入了 WebSocket API，使得开发人员可以轻松地在网页中实现实时通信。

环境准备

在开始之前，请确保您已经安装了以下环境：

  • Node.js
  • Express
  • WebSocket 库（如 ws）

创建 WebSocket 服务器

首先，我们需要创建一个 WebSocket 服务器。以下是一个使用 Node.js 和 Express 框架的简单示例：

const express = require('express');
const http = require('http');
const WebSocket = require('ws');

const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });

  ws.send('something from server');
});

server.listen(8080, () => {
  console.log('WebSocket server running on http://localhost:8080');
});

在这个示例中，我们创建了一个简单的 WebSocket 服务器，它监听端口 8080，并在连接时向客户端发送一条消息。

创建 WebSocket 客户端

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WebSocket Client</title>
</head>
<body>
  <script>
    const ws = new WebSocket('ws://localhost:8080');

    ws.onopen = function() {
      console.log('WebSocket connection established');
      ws.send('Hello, server!');
    };

    ws.onmessage = function(event) {
      console.log('Message from server ', event.data);
    };

    ws.onerror = function(error) {
      console.error('WebSocket error: ', error);
    };

    ws.onclose = function() {
      console.log('WebSocket connection closed');
    };
  </script>
</body>
</html>

在这个示例中，我们创建了一个 WebSocket 客户端，它连接到本地服务器的 8080 端口，并在连接建立后向服务器发送一条消息。同时，它还监听来自服务器的消息，并在控制台输出。

实战示例：实时聊天应用

以下是一个使用 WebSocket 实现的实时聊天应用的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WebSocket Chat</title>
</head>
<body>
  <input type="text" id="messageInput" placeholder="Type a message...">
  <button onclick="sendMessage()">Send</button>
  <ul id="messageList"></ul>

  <script>
    const ws = new WebSocket('ws://localhost:8080');

    ws.onopen = function() {
      console.log('WebSocket connection established');
    };

    ws.onmessage = function(event) {
      const messageList = document.getElementById('messageList');
      const messageElement = document.createElement('li');
      messageElement.textContent = event.data;
      messageList.appendChild(messageElement);
    };

    function sendMessage() {
      const messageInput = document.getElementById('messageInput');
      const message = messageInput.value;
      ws.send(message);
      messageInput.value = '';
    }
  </script>
</body>
</html>

在这个示例中，我们创建了一个简单的实时聊天应用。用户可以在输入框中输入消息，点击发送按钮后，消息将通过 WebSocket 服务器发送给其他连接的客户端。

总结

通过以上示例，我们可以看到 HTML5 WebSocket 如何在网页中实现实时通信。WebSocket 提供了一种高效、实时的通信方式，适用于各种需要实时数据交换的应用场景。希望本文能帮助您轻松掌握 WebSocket 技术。

-- 展开阅读全文 --