WebSocket
简介
WebSocket协议支持(在受控环境中运行不受信任的代码的)客户端与(选择加入该代码的通信的)远程主机之间进行全双工通信。用于此的安全模型是Web浏览器常用的基于原始的安全模式。 协议包括一个开放的握手以及随后的TCP层上的消息帧。 该技术的目标是为基于浏览器的、需要和服务器进行双向通信的(服务器不能依赖于打开多个HTTP连接(例如,使用XMLHttpRequest或<iframe>和长轮询))应用程序提供一种通信机制。
实现原理
在实现websocket连线过程中,需要通过浏览器发出websocket连线请求,然后服务器发出回应,这个过程通常称为“握手” 。在 WebSocket API,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中,为我们实现即时服务带来了两大好处:
1. Header
互相沟通的Header是很小的-大概只有 2 Bytes
2. Server Push
服务器的推送,服务器不再被动的接收到浏览器的请求之后才返回数据,而是在有新数据时就主动推送给浏览器。
HTML5 API
在HTML5中内置有一些API,用于响应应用程序发起的请求。基本API语句如下:
创建对象
1
var ws = new WebSocket(url,name);
url为WebSocket服务器的地址,name为发起握手的协议名称,为可选择项。
发送文本消息
ws.send(msg);
msg为文本消息,对于其他类型的可以通过二进制形式发送。
接收消息
ws.onmessage = (function(){...})();
错误处理
ws.onerror = (function(){...})();
关闭连接
ws.close();
SpringBoot-WebSocket使用
引入
在pom文件中引入WebSocket相关jar包
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
配置
/**
* WebSocket 配置
*/
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
服务端连接
import cn.hutool.core.collection.CollectionUtil;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import javax.annotation.Nullable;
import javax.annotation.Resource;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.List;
import java.util.concurrent.CopyOnWriteArraySet;
import java.util.concurrent.atomic.AtomicInteger;
/**
* WebSocket 服务器
*/
@Component
@Slf4j
@ServerEndpoint("/ws/{userId}")
public class WebSocketServer {
private static final AtomicInteger OnlineCount = new AtomicInteger(0);
// concurrent包的线程安全Set,用来存放每个客户端对应的Session对象。
private static CopyOnWriteArraySet<WebSocketServer> socketServers = new CopyOnWriteArraySet<WebSocketServer>();
//用户id
private Long userId;
//当前会话
private Session session;
/**
* 连接建立成功调用的方法
*/
@OnOpen
public void onOpen(@PathParam("userId")Long userId, Session session) {
socketServers.add(this);
this.session=session;
System.out.println(session.toString());
this.userId=userId;
int cnt = OnlineCount.incrementAndGet(); // 在线数加1
log.info("有连接加入,当前连接数为:{}", cnt);
try {
sendMessage("连接服务器成功");
} catch (IOException e) {
log.error("连接IO异常:{}",e.getMessage());
}
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose(Session session) {
socketServers.remove(this);
int cnt = OnlineCount.decrementAndGet();
log.info("有连接关闭,当前连接数为:{}", cnt);
}
/**
* 收到客户端消息后调用的方法
*
* @param message 客户端发送过来的消息*/
@OnMessage
public void onMessage(String message, Session session) {
//群发消息
for (WebSocketServer item : socketServers) {
try {
item.sendMessage(message);
} catch (IOException e) {
e.printStackTrace();
}
}
}
/**
* 发送消息,实践表明,每次浏览器刷新,session会发生变化。
* @param message
*/
public void sendMessage(String message) throws IOException {
this.session.getBasicRemote().sendText(message);
}
/**
* 出现错误
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error) {
log.error("发生错误:{},Session ID: {}",error.getMessage(),session.getId());
error.printStackTrace();
}
/**
* 给某个具体的用户推送消息
* @param message
* @param userId
* @throws IOException
*/
public void sendMessageTo(@Nullable String message,@Nullable Long userId){
for(WebSocketServer item :socketServers){
if(item.userId.equals(userId)){
try {
item.session.getBasicRemote().sendText(message);
} catch (IOException e) {
log.error("推送消息:{} 给用户{}出现IO异常",message,userId);
}
}
}
}
}
客户端连接
//登录成功后 进入主页面,连接服务器websocket 接收服务器推送过来的消息
connectWebSocket(userId);
function connectWebSocket(){
var websocket = null;
//判断当前浏览器是否支持webSocket
if('WebSocket' in window){
websocket = new WebSocket("ws://127.0.0.1:8080/ws/"+userId);
}else{
alert("您的浏览器不支持网页消息推送");
}
// 链接发生错误的回调方法
websocket.onerror = function(){
console.log("error");
}
// 链接成功建立的回调方法
websocket.onopen = function(event){
console.log("open");
}
// 接受到消息的回调方法
websocket.onmessage = function(event){
//在这里将服务器推送过来的消息 根据自己的业务进行处理
console.log(event.data);
}
// 链接关闭的回调方法
websocket.onclose = function(){
console.log("close");
}
//监听窗口关闭事件,当窗口关闭时,主动关闭wesocket 链接,防止链接还没断开就关闭窗口,server端会抛异常。
window.onbeforeunload = function(){
websocket.close();
}
// 关闭链接
function closeWebSocket(){
websocket.close();
}
}