特点
- 双向通信:与HTTP不同,WebSocket允许在客户端和服务器之间进行双向通信,这意味着服务器可以推送数据给客户端,而不仅仅是响应客户端的请求。
- 低延迟:WebSocket连接始终处于打开状态,因此避免了HTTP请求/响应往返所引入的延迟。这使得它非常适合实时应用程序,可以更快地传输数据。
- 轻量级:WebSocket协议是一种轻量级的协议,与HTTP相比,它减少了在通信头中发送的数据量,从而减少了通信的开销。
- 支持跨域通信:WebSocket支持跨域通信,这使得可以在不同域之间建立连接,实现跨域通信。
常见的使用场景
websocket的JS库
- ws
- Socket.io
- nodejs-websocket
- websocket-node
使用nodejs-websocket启动一个websocket
import ws from 'nodejs-websocket'
var server = ws.createServer(connect => {
connect.on("text", data => {
connect.server.connections.forEach(item => {
console.log(data)
item.send(data)
})
})
connect.on("message", data => {
console.log("收到客户端消息:" + data)
})
connect.on("close", () => {
console.log("websocket连接断开....")
})
connect.on("error", () => {
console.log("websocket连接异常....")
})
})
server.listen(1111, () => {
console.log("websocket running")
})
<input type="text" placeholder="请输入内容">
<button>提交</button>
<script>
const input = document.querySelector('input')
const button = document.querySelector('button')
const socket = new WebSocket('ws://localhost:1111')
socket.addEventListener('open', () => {
console.log('连接成功')
})
button.addEventListener('click', () => {
const value = input.value
socket.send(JSON.stringify(value))
input.value = ''
})
socket.addEventListener('message', (e) => {
console.log(e.data)
})
</script>