WebSocket协议
基于TCP的一种新的网络协议,它实现了浏览器与服务器全双工通信——允许服务器主动向客户端推送消息。
目前很多浏览器已经实现了WebSocket协议,但是依旧存在着很多浏览器没有实现该协议,为了兼容那些没有实现该协议的浏览器,往往还需要通过STOMP协议来完成这些兼容。
开发使用
浏览器支持WebSocket协议
1、引入依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
复制代码
2、通过Java配置文件进行相关配置
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter createEndPoint() {
return new ServerEndpointExporter();
}
}
复制代码
3、定义服务端点
/**
* 让Spring创建WebSocket的服务端点,请求地址为"/ws"
*/
@Service
@ServerEndpoint("/ws")
@Slf4j
public class WebSocketService {
private Session session;
/**
* 客户端打开WebSocket服务端点调用方法
*/
@OnOpen
public void onOpen(Session session) {
this.session = session;
log.info("连接建立成功方法调用");
}
/**
* 客户端关闭WebSocket服务端点调用方法
*/
@OnClose
public void onClose() {
log.info("连接关闭方法调用");
}
/**
* 客户端发送消息,WebSocket服务端点调用方法
*
* @param msg 来自客户端的信息
*/
@OnMessage
public void onMessage(String msg) throws IOException {
this.session.getBasicRemote().sendText("服务器端发来的消息啦:你好啊");
log.info("客户端消息:{}", msg);
}
/**
* 客户端请求WebSocket服务端点异常方法
*/
public void onError() {
log.info("错误发生时调用");
}
}
复制代码
4、客户端:创建index.html
<html>
<title>WebSocket测试页面</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<body>
<input id="message" type="text"/>
<button onclick="sendMessage()">发送消息</button>
<button onclick="closeWebSocket()">关闭WebSocket连接</button>
<div id="context"></div>
</body>
<script>
let websocket = new WebSocket("ws://localhost:8082/ws");
websocket.onerror = () => {
appendMessage("连接错误")
};
websocket.onopen = () => {
appendMessage("连接成功")
};
//接收消息方法回调
websocket.onmessage = (event) => {
appendMessage(event.data)
};
websocket.onclose = () => {
appendMessage("关闭连接")
};
function appendMessage(message) {
let context = $("#context").html() + "</br>" + message;
$("#context").html(context);
}
//关闭WebSocket连接
function closeWebSocket() {
websocket.close();
}
//发送消息
function sendMessage() {
let message = $("#message").val();
websocket.send(message);
}
</script>
</html>
复制代码
最终效果图:
- 客户端
- 服务器端:
近期评论