HTML5 WebSocket
- WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议
- WebSocket 允许服务器主动向客户端推送数据,浏览器和服务器只需要完成一次握手,就可以创建 持久性 的连接,并进行 双向数据传输
WebSocket 事件
事件 | 事件触发条件 |
---|
open | 建立连接时触发 |
message | 接收服务器数据时触发 |
error | 连接失败时触发 |
close | 连接断开时触发 |
WebSocket 方法
方法 | 方法的使用 |
---|
send() | 向服务器发送数据 |
close() | 断开连接 |
- WebSocket 协议本质上是一个基于 TCP 的协议
创建一个WebSocket服务器
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")
socket.onopen = function(){
console.log("connected successful...")
socket.send("Hello OK???")
}
socket.onmessage = function(event){
console.log(`receive server message: ${event.data}`)
socket.close()
}
socket.onclose = function(){
console.log("connecte closed...")
}
</script>
</body>
</html>
- 运行结果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a6cbe13898d815fa8c21286fe72f7e63.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e2aaefc8ae62cd9868a9a322cbcf903e.png)
WebSocket 的 readyState 属性
readyState属性值 | 描述 |
---|
0 | 还没有建立连接 |
1 | 成功建立连接,可以进行通信了 |
2 | 正在断开连接 |
3 | 连接已经断开,无法进行通信 |