A. 在pom文件中添加依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
B. 定义ServerEndPoint
@RestController
@ServerEndpoint("/chat-room/{username}")
public class ChatRoomServerEndpoint {
@OnOpen
public void openSession(@PathParam("username") String username, Session session) {
}
@OnMessage
public void onMessage(@PathParam("username") String username, String message) {
}
@OnClose
public void onClose(@PathParam("username") String username, Session session) {
}
@OnError
public void onError(Session session, Throwable throwable) {
}
}
C.开启对websocket的支持
给应用添加注解@EnableWebSocket,同时往web容器里面注入一个bean,ServerEndpointExporter。
@EnableWebSocket
@SpringBootApplication
public class WebSocketApplication {
public static void main(String[] args) {
SpringApplication.run(WebSocketApplication.class, args);
}
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
D.前端使用
var urlPrefix ='ws://localhost:8080/chat-room/';
var ws = null;
$('#user_join').click(function(){
var username = $('#in_user_name').val();
if(username==''){
alert("请输入用户名!");
return;
}
var url = urlPrefix + username;
ws = new WebSocket(url);
ws.onopen = function () {
console.log("建立 websocket 连接...");
};
ws.onmessage = function(event){
//服务端发送的消息
$('#message_content').append(event.data+'\n');
};
ws.onclose = function(){
$('#message_content').append('用户['+username+'] 已经离开聊天室!');
console.log("关闭 websocket 连接...");
}
});
//客户端发送消息到服务器
$('#user_send_all').click(function(){
var msg = $('#in_room_msg').val();
if(msg==''){
alert("请填写消息!");
return;
}
if(ws && msg!=''){
ws.send(msg);
}
});
// 退出聊天室
$('#user_exit').click(function(){
if(ws){
ws.close();
}
});