HTML5 WebSocket技术使用详解

最新推荐文章于 2024-09-01 17:50:07 发布

DDOS防御

最新推荐文章于 2024-09-01 17:50:07 发布

阅读量120

点赞数

分类专栏：网络技术文章标签： html5 websocket 前端

原文链接：https://www.yunjiasu.cc

版权

网络技术专栏收录该内容

141 篇文章 1 订阅

订阅专栏

HTML5 WebSocket API 提供了一种在单个连接上进行全双工通信的方式。这意味着客户端和服务器可以同时发送和接收数据。WebSocket 技术非常适合需要实时通信的应用场景，比如在线游戏、聊天应用、股票行情更新等。

WebSocket 的基本概念

全双工通信：WebSocket 连接允许服务器和客户端之间进行双向通信，任何一方都可以随时发送数据。
持久连接：一旦建立，WebSocket 连接会保持打开状态，直到客户端或服务器端明确关闭连接。
基于TCP：WebSocket 连接是建立在TCP协议之上的，确保了数据传输的可靠性。

使用 WebSocket 的步骤

创建 WebSocket 对象：使用 new WebSocket(url) 创建一个新的 WebSocket 对象，其中 url 是 WebSocket 服务器的地址，通常以 ws://（非加密）或 wss://（加密）开头。
打开连接：创建 WebSocket 对象后，会自动尝试连接到指定的服务器。可以通过设置 onopen 事件处理器来响应连接打开事件。
发送和接收消息：一旦连接打开，就可以使用 send() 方法发送消息，使用 onmessage 事件处理器来接收服务器发送的消息。
关闭连接：使用 close() 方法关闭 WebSocket 连接。可以通过设置 onclose 事件处理器来响应连接关闭事件。
错误处理：设置 onerror 事件处理器来处理连接过程中可能出现的错误。

示例代码

下面是一个简单的 WebSocket 使用示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Demo</title>
    <script>
        // 当文档加载完毕时执行
        document.addEventListener('DOMContentLoaded', function() {
            // 创建一个新的 WebSocket 对象
            var ws = new WebSocket('ws://example.com/socketserver');

            // 连接打开时触发
            ws.onopen = function() {
                console.log('WebSocket 连接已打开');
                // 可以发送消息给服务器
                ws.send('Hello Server!');
            };

            // 接收到消息时触发
            ws.onmessage = function(event) {
                console.log('收到消息：', event.data);
                // 可以在这里处理接收到的消息
            };

            // 连接关闭时触发
            ws.onclose = function() {
                console.log('WebSocket 连接已关闭');
            };

            // 出现错误时触发
            ws.onerror = function(error) {
                console.error('WebSocket 出现错误：', error);
            };
        });
    </script>
</head>
<body>
    <h1>WebSocket Demo</h1>
    <p>查看控制台输出</p>
</body>
</html>