HTML 5 WebSocket

最新推荐文章于 2024-03-05 20:03:38 发布

来自星星的马

最新推荐文章于 2024-03-05 20:03:38 发布

阅读量389

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 5 文章标签： websocket

本文链接：https://blog.youkuaiyun.com/M_wolf/article/details/81330210

HTML 5 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了HTML5新增的WebSocket协议，详细解释了全双工通信的概念，并提供了如何判断浏览器是否支持WebSocket的方法。文中还给出了WebSocket的基本使用示例，包括连接、发送消息、接收消息及错误处理等。

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

WebSocket 是 HTML 5 新增的协议，基于 TCP 连接进行全双工通信

全双工通信：表示允许数据在两个方向上同时传输。

判断浏览器是否支持 WebSocket

// 判断浏览器是否支持 WebSocket
if (window.WebSocket != undefined) {
    var Socket = new WebSocket('ws://localhost: 8080')
}

ws 协议是 WebSocket 新增的协议，此外还有 wss 协议，表示加密的 WebSocket 协议。两者的关系如同 HTTP 协议对应 HTTPS 协议。

WebSocket 实例

// 创建 WebSocket 实例
var Socket = new WebSocket('ws://localhost:8080')
// 连接打开
Socket.addEventListener('open', function(event) {
    socket.send('Hello Server!')
})
// 建通数据传送，有数据到达时触发
Socket.addEventListener('message', function(event) {
    console.log('Message from Server', event.data)
})
// 当错误发生时，用于监听 error 事件的事件监听器
Socker.addEventListener('error', function(event) {
    console.log(event.data)
})
// 连接关闭
Socket.addEventListener('close', function(event){
    console.log(event.data)
})