WebSocket是一种在Web浏览器和服务器之间实现双向通信的协议。与HTTP协议不同,它允许服务器主动向客户端发送数据,而不需要客户端发出请求。这使得WebSocket非常适合实时应用程序,如在线聊天、实时游戏、股票市场更新等。
特点
- 双向通信:与HTTP不同,WebSocket允许在客户端和服务器之间进行双向通信,这意味着服务器可以推送数据给客户端,而不仅仅是响应客户端的请求。
- 低延迟:WebSocket连接始终处于打开状态,因此避免了HTTP请求/响应往返所引入的延迟。这使得它非常适合实时应用程序,可以更快地传输数据。
- 轻量级:WebSocket协议是一种轻量级的协议,与HTTP相比,它减少了在通信头中发送的数据量,从而减少了通信的开销。
- 支持跨域通信:WebSocket支持跨域通信,这使得可以在不同域之间建立连接,实现跨域通信。
常见的使用场景
- 实时聊天应用
- 实时游戏
- 实时数据更新
websocket的JS库
- ws
- Socket.io
- nodejs-websocket
- websocket-node
使用nodejs-websocket启动一个websocket
import ws from 'nodejs-websocket'
// 创建一个服务server,每次用户链接,函数就会被执行,并给当前用户创建一个connect对象
var server = ws.createServer(connect => {
// 每当接收到用户传递过来的数据,就会触发text事件,并传入数据
connect.on("text", data => {
// 给所有用户发送数据
connect.server.connections.forEach(item => {
console.log(data)
item.send(data)
})
})
connect.on("message", data => {
console.log("收到客户端消息:" + data)
})
//监听websocket断开链接
connect.on("close", () => {
console.log("websocket连接断开....")
})
//监听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>