websocket

最新推荐文章于 2022-03-31 11:30:13 发布

傻她你呀

最新推荐文章于 2022-03-31 11:30:13 发布

阅读量97

点赞数

分类专栏： html5 文章标签： websocket WebScoket html5websocket socket

本文链接：https://blog.csdn.net/qq_41672008/article/details/94343056

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML5 WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议
WebSocket 允许服务器主动向客户端推送数据，浏览器和服务器只需要完成一次握手，就可以创建 持久性 的连接，并进行 双向数据传输

WebSocket 事件

事件	事件触发条件
open	建立连接时触发
message	接收服务器数据时触发
error	连接失败时触发
close	连接断开时触发

WebSocket 方法

方法	方法的使用
send()	向服务器发送数据
close()	断开连接

WebSocket 协议本质上是一个基于 TCP 的协议

创建一个WebSocket服务器

我使用的是 ws 来创建的

npm i ws

搭建服务器

const socket = require("ws")
const server = new socket.Server({ port:3000 })
server.on("connection",function(websocket,request){
    console.log(`connection path is ${request.url}`)
    websocket.on("message",function(message){
        console.log(`recieve client message: ${message}`)
        websocket.send("Hello World!!!")
    })
})

客户端

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>demo</title>
    </head>
    <body>
        <script>
            // 创建连接，连接服务器
            const socket = new WebSocket("ws://localhost:3000")
            // 成功建立连接是触发 open 事件
            socket.onopen = function(){
                console.log("connected successful...")
                socket.send("Hello OK???")
            }
            // 接收到服务器推送数据时触发 message 事件
            socket.onmessage = function(event){
                console.log(`receive server message: ${event.data}`)
                // 断开连接
                socket.close()
            }
            // 断开连接时触发 close 事件
            socket.onclose = function(){
                console.log("connecte closed...")
            }
        </script>
    </body>
</html>

运行结果

WebSocket 的 readyState 属性

readyState属性值	描述
0	还没有建立连接
1	成功建立连接，可以进行通信了
2	正在断开连接
3	连接已经断开，无法进行通信

傻她你呀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
websocket

HTML5 WebSocketWebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议WebSocket 允许服务器主动向客户端推送数据，浏览器和服务器只需要完成一次握手，就可以创建持久性的连接，并进行双向数据传输WebSocket 事件事件事件触发条件open建立连接时触发message接收服务器数据时触发...
复制链接

扫一扫

专栏目录