閑來無事，寫一篇關於websocket推送消息的文章，概念我們就不多講了，直接上干貨吧！！！
我們要做的就是：使用websocket來推送消息，但是如果說接收消息的那個用戶沒有連接上websocket，那么他就會接收不到我們的消息，這時候我們需要將消息存到數據庫，等用戶上線時自己查詢數據庫里面自己的消息，假如用戶在線，我們就會將消息直接推送給他並且也保存在數據庫，這時我們的前端未讀消息數量應該+1，這個我們可以使用一個定時任務，比如隔5s我就像全部用戶都推送消息，讓前端觸發消息回調的方法，我們可以在那個方法里面做手腳，就是去查詢一遍我們的數據庫中當前用戶的未讀消息，來達到消息數量的增減。
1.引入websocket依賴和一些其他依賴
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.16</version>
<scope>compile</scope>
</dependency>
<!--thymeleaf-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
2.編寫websocket配置類
@Component
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
3.編寫websocket連接類
@Component
@ServerEndpoint("/webSocket/{userId}")
@Slf4j
public class WebSocket {
private String userId;
private Session session;
private static Map<String, Session> sessionPool = new HashMap<String, Session>();
private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();
@OnOpen
public void onOpen(Session session,@PathParam(value = "userId") String userId) {
this.session = session;
this.userId = userId;
webSocketSet.add(this);
sessionPool.put(userId, session);
log.info("【websocket消息】有新的連接, 總數:{}", webSocketSet.size());
}
@OnClose
public void onClose() {
webSocketSet.remove(this);
sessionPool.remove(this.userId);
log.info("【websocket消息】連接斷開, 總數:{}", webSocketSet.size());
}
@OnMessage
public void onMessage(String message) {
log.info("【websocket消息】收到客戶端發來的消息:{}", message);
}
/**
* 服務端推送消息（單點發送）
*
* @param userId
* @param message
*/
public void pushMessage(String userId, String message) {
Session session = sessionPool.get(userId);
if (session != null && session.isOpen()) {
try {
log.info("【websocket消息】 單點消息:" + message);
session.getAsyncRemote().sendText(message);
} catch (Exception e) {
e.printStackTrace();
}
}
}
/**
* 服務器端推送消息（群發）
*/
public void pushMessage(String message) {
try {
webSocketSet.forEach(ws -> ws.session.getAsyncRemote().sendText(message));
} catch (Exception e) {
e.printStackTrace();
}
}
}
4.編寫兩個控制器
@RequestMapping("/demo")
@RestController
public class DemoContrlller {
@Autowired
WebSocket webSocket;
private Integer num = 1;
/**
* 單點發送
* @param userId
* @param message
*/
@RequestMapping("/sendMessage")
public void sendMessage(String userId, String message) {
webSocket.pushMessage(userId, message);
}
/**
* 群發
* @param message
*/
@RequestMapping("/send")
public void send(String message) {
webSocket.pushMessage(message);
}
/**
* 模擬消息增加
* @return
*/
@RequestMapping("/add")
public Integer num() {
num++;
return num;
}
/**
* 模擬消息減少
* @return
*/
@RequestMapping("/reduce")
public Integer jian() {
num--;
return num;
}
}
// 用於訪問到對應的視圖
@Controller
@RequestMapping("/test")
public class TestController {
@RequestMapping("/index")
public String index() {
return "index";
}
}
前端代碼
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可選的 Bootstrap 主題文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>
<body>
<div class="btn btn-default">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
<span class="badge badge-danger" style="background-color:#FF0000;color:#FFFFFF " id ="ms"></span>
</div>
<button id="add" onclick="add()">添加</button>
<button id="reduce" onclick="reduce()">減少</button>
<div id="message"></div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
var websocket = null;
if ('WebSocket' in window) {
websocket = new WebSocket('ws://192.168.1.189:8001/webSocket/1');
} else {
alert('該瀏覽器不支持websocket!');
}
websocket.onopen = function (event) {
console.log('建立連接');
}
websocket.onclose = function (event) {
console.log('連接關閉');
}
websocket.onmessage = function (event) {
// 收到消息
console.log('收到消息:' + event.data)
setMessageInnerHTML(event.data);
f();
}
websocket.onerror = function () {
alert('websocket通信發生錯誤！');
}
window.onbeforeunload = function () {
websocket.close();
}
function setMessageInnerHTML(innerHTML) {
document.getElementById('message').innerHTML = innerHTML + '<br/>';
}
function f() {
$.ajax({
type: 'post',
dataType: 'text',
url: '/demo/num',
data: {},
cache: false,
async: true,
success: function (data) {
var data = eval('(' + data + ')');
console.log('數量:' + data)
if(data>0){
document.getElementById('ms').innerHTML = data + '<br/>';
}
}
});
}
function add() {
$.ajax({
type: 'post',
dataType: 'text',
url: '/demo/add',
data: {},
cache: false,
async: true,
success: function (data) {
if(data>0){
document.getElementById('ms').innerHTML = data + '<br/>';
}
}
});
}
function reduce() {
$.ajax({
type: 'post',
dataType: 'text',
url: '/demo/reduce',
data: {},
cache: false,
async: true,
success: function (data) {
if(data>0){
document.getElementById('ms').innerHTML = data + '<br/>';
}else{
document.getElementById('ms').innerHTML ='';
}
}
});
}
</script>
</body>
</html>
效果
我們也可以通過postman來測試推送消息，看數量是否增加
http://192.168.1.189:8001/demo/sendMessage?userId=1&message=哈哈哈
效果
有問題，歡迎評論留言！！！