HTML5 WebSocket的入门使用

最新推荐文章于 2025-05-08 19:13:31 发布

原创最新推荐文章于 2025-05-08 19:13:31 发布 · 4.6k 阅读

CC 4.0 BY-SA版权

文章标签：

20 篇文章

订阅专栏

本文详细介绍如何使用HTML5 WebSocket实现客户端与服务器的长连接通信。包括创建WebSocket实例、连接服务器、发送与接收消息及关闭连接的具体步骤。适用于前端开发者学习WebSocket的基础用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5 WebSocket：长连接，客户端与服务端可以保持长时间的通信。

1、创建一个websocket实例，连接远程服务器并且需要一个连接服务器的url

let baseUrl = "ws://echo.websocket.org/"
let webSocket = new WebSocket(baseUrl)

注意，这里的URL前缀不再是HTTP协议，而是 ‘ws://’ 表示的是websocket协议，当然还有一种安全websocket协议的前缀 ‘wss://’ ,只有这两种。

2、创建之后开启WebSocket，方法：’ onopen ’

webSocket.onopen = function (e) {
    alert('webSocket is open')
}

3、接收和发送消息，方法：’ onmessage’ , 'send ’

webSocket.onmessage = function (e) {
    alert(e.data)
}
-----------------------------------------------------
webSocket.send('这是一条测试消息')

4、关闭WebSocket，方法：’ onclose ’

webSocket.onclose = function (e) {
    alert('webSocket is close')
}

二、相关文档

HTML5 WebSocket ：http://www.websocket.org/