WebSocket 是基于 TCP 的一种新的网络协议。。它实现了浏览器与服务器全双工通信--浏览器和服务器只需要完成一次握手,两者之间就可以创建持久性的连接,并进行双向数据传输。
应用场景:视频弹幕、网页聊天、体育实况更新、股票基金报价实时更新。
服务器可以主动给客户端发送消息,客户端也可以主动给服务器发送消息。
具体使用的一个入门案例:
实现步骤
- 直接使用websocket.html页面作为WebSocket客户端
- 导入WebSocket的maven坐标
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>
- 导入WebSocket服务端组件WebSocketServer,用于和客户端通信导入配置
- WebSocketConfiquration,注册WebSocket的服务端组件
- 导入定时任务类WebSocketTask,定时向客户端推送数据
var websocket = null;
var clientId = Math.random().toString(36).substr(2);
//判断当前浏览器是否支持WebSocket
if('WebSocket' in window){
//连接WebSocket节点
websocket = new WebSocket("ws://localhost:8080/ws/"+clientId);
}
else{
alert('Not support websocket')
}
//连接发生错误的回调方法
websocket.onerror = function(){
setMessageInnerHTML("error");
};
//连接成功建立的回调方法
websocket.onopen = function(){
setMessageInnerHTML("连接成功");
}
//接收到消息的回调方法
websocket.onmessage = function(event){
setMessageInnerHTML(event.data);
}
//连接关闭的回调方法
websocket.onclose = function(){
setMessageInnerHTML("close");
}
//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
window.onbeforeunload = function(){
websocket.close();
}
//将消息显示在网页上
function setMessageInnerHTML(innerHTML){
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}
//发送消息
function send(){
var message = document.getElementById('text').value;
websocket.send(message);
}
//关闭连接
function closeWebSocket() {
websocket.close();
}
WebSocket是一种在单个TCP连接上进行全双工通信的协议,允许在客户端和服务器之间建立持久连接,以便它们可以随时开始发送数据。相比传统的HTTP请求-响应模式,WebSocket提供了更快的响应速度和更低的延迟,因为它避免了HTTP中频繁的连接和断开操作。