WebSocket

WebSocket

低延迟，双向实时通信(双全工)，长期运行

简介

相比HTTP协议，WebSocket是一种****实时通信协议

在实时通讯前，HTTP通过****轮询解决实时问题

轮询：客户端定期向服务器发送请求

长轮询：客户端发出请求后，保持连接打开，等待新数据响应后再关闭连接

Comet：保持长连接，返回请求后继续保持连接打开

WebSocket的连接只需要建立一次

建立连接

理论须知

需要HTTP向服务器发起一次常规Get请求，并在这个请求头上携带Upgrade

Upgrade作为升级请求将传递给服务器，协议从HTTP升级为WebSocket

在此之后客户端和服务器即可随时向彼此发送消息

具体代码

前端

1
const socket = new WebSocket("ws://localhost:8080");
1
2
3
4
5
6
7
8
9
socket.onopen =function(event){
    console.log("Websocket连接已打开")
}
socket.onmessage =function(event){
    console.log("收到了回复:"event.data)
}
socket.onclose = function(event){
    console.log("Websocket连接已关闭")
}
1
2
3
function click(){//发送消息
    socket.send("Hello World!");
}

后端

1
2
3
4
5
const http = require('http');//引入模块
const WebSocket = require('ws');

const server = http.createServer();//HTTP服务器实例
const wss = new WebSocket.Server({ server });//根据服务器实例创建WebSocket实例
1
2
3
4
5
6
7
8
9
10
wss.on('connection',(socket) => {//客户端连入Websocket服务器
    socket.on('message',(message)=>{
        console.log('收到消息:'+ message)
        socket.send('Hello FireUG');
    });
    
    socket.on('close',() => {
        console.log('Websocket连接已关闭')
    })
}
1
2
3
4
server.on('request',(request,response)=>{
    response.writeHead(200,{'Content-Type':'text/plain'})
    response.end('Hello, World!');
})
1
2
3
server.listen(8080，() => {
    console.log('服务器已启动，端口号为 8080');
})

心跳机制

为了保持长连接，服务端和客户端之间通过 心跳包保持连接状态，防止长时间没有数据传输而被切断

心跳包

一种数据包，不包含任何实际数据

客户端和服务端定期发送一个空的数据包，确保链接仍然有效

如果一段时间没有收到对方的心跳包，就可认为连接已经断开

限制

安全

不提供加密功能，需采用其他方式来确保安全性

SSL协议：可对WebSocket连接进行加密防止敏感信息被窃听和篡改

设置黑白名单：在服务端设置，只允许特定IP地址或域名的客户端进行连接

支持

小于IE10的浏览器不支持

优化

保持长连接需要服务器不断地维护和处理连接状态，需要优化性能，不然会过度地消耗服务器资源