WebSocket 简单入门
websocket 应用场景：社交订阅、多玩家游戏、协同编程/编辑、点击数据流、股票基金报价、体育实况更新、多媒体聊天、基于位置的应用、在线教育等等。
参考：https://blog.csdn.net/resilient/article/details/85613446
online-chatroom 效果图
简单做一下：
前端
socket = new WebSocket('ws://localhost:9999/ws/demo')
// 建立连接的回调
socket.onopen = function () {
}
// 收到消息的回调
socket.onmessage = function (msg) {
// 拿到消息，更新UI
let data = JSON.parse(msg.data)
// 处理消息
// ...
}
// 发生错误的回调
socket.onerror = function () {
alert('onerror, ws 发生了错误')
}
// 关闭的回调
socket.onclose = function () {
console.log('连接已关闭')
}
后端
引入依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
使用 websocket 依赖提供的 @ServerEndpoint、 @OnOpen、@OnClose 、@OnMessage 等注解，结合 WebSocket 生命周期进行业务方法编写。与 socket 编程相似，无非是什么阶段干什么事。
import cn.hutool.json.JSONArray;
import cn.hutool.json.JSONObject;
import cn.hutool.json.JSONUtil;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
/**
* @author websocket服务
*/
@ServerEndpoint(value = "/ws/{username}")
@Component
public class WebSocketServer {
/**
* 记录当前在线连接
*/
public static final Map<String, Session> SESSION_MAP = new ConcurrentHashMap<>();
private static final Logger log = LoggerFactory.getLogger(WebSocketServer.class);
/**
* 连接建立成功调用的方法
*
* @param session
* @param username
*/
@OnOpen
public void onOpen(Session session, @PathParam("username") String username) {
if (username == null || "".equals(username) || SESSION_MAP.containsKey(username)) {
log.info("重复加入，或用户名无效，当前用户已加入 {}", username);
try {
JSONObject jsonObject = new JSONObject();
jsonObject.set("msg", "username不合法");
sendMessage(jsonObject.toString(), session);
session.close();
} catch (IOException e) {
log.error("关闭失败", e);
}
return;
}
SESSION_MAP.put(username, session);
log.info("新增会话，用户[{}], 当前在线人数为：{}", username, SESSION_MAP.size());
// 刷新用户列表：将当前所有用户信息发送给客户端
JSONObject result = new JSONObject();
JSONArray array = new JSONArray();
for (Object key : SESSION_MAP.keySet()) {
JSONObject jsonObject = new JSONObject();
jsonObject.set("username", key);
// {"username", "zhang", "username": "admin"}
array.add(jsonObject);
}
result.set("users", array);
// {"users": [{"username": "zhang"}, {"username": "admin"}]}
sendMsg2All(JSONUtil.toJsonStr(result));
}
/**
* 连接关闭调用的方法
*
* @param session
* @param username
*/
@OnClose
public void onClose(Session session, @PathParam("username") String username) {
SESSION_MAP.remove(username);
log.info("连接关闭，移除[{}]的用户会话, 当前在线人数为={}", username, SESSION_MAP.size());
}
/**
* 收到客户端消息后调用的方法
* 后台收到客户端发送过来的消息
* onMessage 是一个消息的中转站
* 接收浏览器端 socket.send 发送过来的 json数据
*
* @param message 客户端发送过来的消息
*/
@OnMessage
public void onMessage(String message, Session session, @PathParam("username") String username) {
log.info("收到消息，来自[{}]的消息[{}]", username, message);
JSONObject obj = JSONUtil.parseObj(message);
// to表示发送给哪个用户，比如 admin
String toUsername = obj.getStr("to");
// 发送的消息文本 hello
String text = obj.getStr("text");
// {"to": "admin", "text": "聊天文本"}
// 根据 to用户名来获取 session，再通过session发送消息文本
Session toSession = SESSION_MAP.get(toUsername);
if (toSession != null) {
// 服务器端 再把消息组装一下，组装后的消息包含发送人和发送的文本内容
// {"from": "zhang", "text": "hello"}
JSONObject jsonObject = new JSONObject();
jsonObject.set("from", username);
jsonObject.set("text", text);
this.sendMessage(jsonObject.toString(), toSession);
log.info("发送消息成功：[{}]成功给[{}]发送消息[{}]", username, toUsername, jsonObject);
} else {
log.info("发送失败，未找到用户[{}]的会话", toUsername);
}
}
/**
* 发送错误时
*
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error) {
log.error("发生错误, sessionId = {}", session.getId());
error.printStackTrace();
}
/**
* 服务端发送消息给客户端
*
* @param message
* @param toSession
*/
private void sendMessage(String message, Session toSession) {
try {
toSession.getBasicRemote().sendText(message);
log.info("成功发送[{}]消息给客户端(sessionId={})", message, toSession.getId());
} catch (Exception e) {
log.error("发送消息失败", e);
}
}
/**
* 服务端发送消息给所有客户端
*
* @param message
*/
private void sendMsg2All(String message) {
try {
for (Session session : SESSION_MAP.values()) {
try {
session.getBasicRemote().sendText(message);
log.info("服务端成功发送消息[{}]给客户端[{}]", message, session.getId());
} catch (Exception e) {
log.error("发送消息失败", e);
}
}
} catch (Exception e) {
log.error("发送消息失败", e);
}
}
}
源代码
完整代码：https://gitee.com/engureguo/websocket-demo
