在現(xiàn)代Web應(yīng)用中，提供實(shí)時(shí)通知對(duì)于改善用戶體驗(yàn)至關(guān)重要。WebSocket技術(shù)允許建立雙向通信通道，從系統(tǒng)后臺(tái)將消息實(shí)時(shí)傳送給系統(tǒng)用戶，并在前端以彈窗的形式通知用戶。本文將深入探討如何使用WebSocket來(lái)實(shí)現(xiàn)這一功能。

WebSocket簡(jiǎn)介

WebSocket是一種雙向通信協(xié)議，與傳統(tǒng)的HTTP通信不同，它支持持久連接，使得服務(wù)器能夠主動(dòng)向客戶端推送消息。這使得WebSocket成為實(shí)時(shí)通信和消息傳送的理想選擇。

基本實(shí)現(xiàn)步驟

要實(shí)現(xiàn)系統(tǒng)后臺(tái)消息的實(shí)時(shí)通知，我們可以遵循以下基本步驟：

后臺(tái)服務(wù)器

在后臺(tái)，我們需要?jiǎng)?chuàng)建一個(gè)WebSocket服務(wù)器來(lái)處理連接和消息廣播。使用Java的WebSocket庫(kù)，我們可以輕松建立WebSocket服務(wù)器。

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io IOException;
import java.util.concurrent.CopyOnWriteArrayList;@ServerEndpoint("/websocket")
public class WebSocketServer {private static CopyOnWriteArrayList<Session> sessions = new CopyOnWriteArrayList<>();@OnOpenpublic void onOpen(Session session) {sessions.add(session);}@OnMessagepublic void onMessage(String message, Session session) {// 處理收到的消息}@OnClosepublic void onClose(Session session) {sessions.remove(session);}public static void broadcastMessage(String message) {for (Session session : sessions) {try {session.getBasicRemote().sendText(message);} catch (IOException e) {e.printStackTrace();}}}
}

后端接口

在后端，我們需要提供一個(gè)HTTP接口，以便系統(tǒng)后臺(tái)可以發(fā)送消息給WebSocket客戶端。這個(gè)接口接受POST請(qǐng)求，包含消息內(nèi)容和接收者信息。為了實(shí)現(xiàn)這一功能，我們使用了Spring Framework的WebSocket支持，并引入了SimpMessagingTemplate。

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;@RestController
public class MessageController {@Autowiredprivate SimpMessagingTemplate messagingTemplate;@PostMapping("/send-message")public void sendMessageToUser(@RequestBody MessageDto message) {// 在此處，您可以執(zhí)行任何邏輯以準(zhǔn)備要發(fā)送的消息內(nèi)容String messageContent = message.getContent();// 向指定用戶發(fā)送消息messagingTemplate.convertAndSendToUser(message.getRecipient(), "/queue/messages", messageContent);}
}

SimpMessagingTemplate

SimpMessagingTemplate是Spring Framework的一部分，它允許在后端應(yīng)用程序中將消息發(fā)送到WebSocket客戶端的特定目的地（destination），以便將消息傳遞到訂閱該目的地的WebSocket客戶端。這是實(shí)現(xiàn)實(shí)時(shí)消息傳遞的關(guān)鍵工具，它允許后臺(tái)將消息推送到WebSocket客戶端，從而實(shí)現(xiàn)了實(shí)時(shí)通知功能。

SimpMessagingTemplate是Spring Framework中的一個(gè)類(lèi)，它用于向WebSocket客戶端發(fā)送消息。它是Spring的WebSocket支持模塊的一部分，通常用于實(shí)現(xiàn)實(shí)時(shí)消息傳遞功能。以下是一些關(guān)于SimpMessagingTemplate的基本信息：

• 用途：SimpMessagingTemplate用于發(fā)送消息到WebSocket目的地（destination），使消息能夠到達(dá)訂閱該目的地的WebSocket客戶端。

• Spring WebSocket：Spring Framework提供了WebSocket支持，允許開(kāi)發(fā)者構(gòu)建具有實(shí)時(shí)消息傳遞功能的應(yīng)用程序。SimpMessagingTemplate是這一支持的關(guān)鍵組件之一。

• 示例用途：通常，SimpMessagingTemplate用于處理后端應(yīng)用程序中的業(yè)務(wù)邏輯，然后將結(jié)果消息發(fā)送給前端的WebSocket客戶端。這可以用于實(shí)現(xiàn)實(shí)時(shí)聊天、通知、即時(shí)數(shù)據(jù)傳遞等功能。

• 目的地（destination）：在Spring WebSocket中，消息發(fā)送到WebSocket客戶端的特定位置被稱(chēng)為目的地。SimpMessagingTemplate允許您將消息發(fā)送到指定的目的地，WebSocket客戶端通過(guò)訂閱相應(yīng)目的地來(lái)接收這些消息。

在上述示例中，SimpMessagingTemplate被用于向WebSocket客戶端發(fā)送消息，實(shí)現(xiàn)了系統(tǒng)后臺(tái)向用戶發(fā)送實(shí)時(shí)通知的功能。它可以將消息發(fā)送到指定用戶的特定目的地，以便將消息傳遞到具體的WebSocket訂閱者。

要使用SimpMessagingTemplate，通常需要配置Spring WebSocket支持并注入該類(lèi)。然后，您可以在后端的控制器或服務(wù)中使用它來(lái)發(fā)送消息給WebSocket客戶端。

MessageDto

MessageDto是一個(gè)數(shù)據(jù)傳輸對(duì)象，包含了消息的接收者和內(nèi)容。在HTTP請(qǐng)求的請(qǐng)求體中發(fā)送MessageDto對(duì)象。

public class MessageDto {private String recipient;private String content;// Getters and setters
}

前端客戶端

在前端，我們需要?jiǎng)?chuàng)建WebSocket連接并處理從服務(wù)器接收到的消息。通常，我們可以將接收到的消息以彈窗的形式通知用戶。

const socket = new WebSocket("ws://example.com/websocket");socket.onopen = () => {console.log("WebSocket連接已建立");
};socket.onmessage = (event) => {const message = event.data;// 使用彈窗通知用戶showNotification(message);
};socket.onclose = () => {console.log("WebSocket連接已關(guān)閉");
};function showNotification(message) {// 使用瀏覽器的通知API或自定義彈窗組件來(lái)通知用戶// 以下是一個(gè)簡(jiǎn)單的示例，使用瀏覽器通知APIif ("Notification" in window) {if (Notification.permission === "granted") {new Notification("新消息", { body: message });} else if (Notification.permission !== "denied") {Notification.requestPermission().then((permission) => {if (permission === "granted") {new Notification("新消息", { body: message });}});}}
}

示例應(yīng)用

通過(guò)這個(gè)實(shí)例，系統(tǒng)后臺(tái)可以使用WebSocket將重要消息實(shí)時(shí)通知給用戶。用戶將獲得彈窗通知，無(wú)需刷新頁(yè)面或等待長(zhǎng)時(shí)間來(lái)查看消息。這種實(shí)時(shí)通知機(jī)制對(duì)于在線聊天應(yīng)用、通知系統(tǒng)、即時(shí)交易平臺(tái)等場(chǎng)景非常有用。

WebSocket技術(shù)為實(shí)現(xiàn)實(shí)時(shí)通知提供了一個(gè)強(qiáng)大而靈活的工具，允許系統(tǒng)后臺(tái)與前端用戶之間建立持久的雙向通信通道。這種實(shí)時(shí)通信增強(qiáng)了用戶體驗(yàn)，使用戶能夠快速響應(yīng)重要信息。無(wú)論是社交媒體、電子郵件通知還是在線購(gòu)物平臺(tái)，WebSocket可以為您的應(yīng)用程序提供實(shí)時(shí)通知功能。

通過(guò)WebSocket，您可以改進(jìn)用戶體驗(yàn)、提高用戶參與度，并確保及時(shí)傳達(dá)重要信息。實(shí)時(shí)消息傳送是現(xiàn)代Web應(yīng)用程序的重要組成部分，幫助您與用戶建立更強(qiáng)的連接。

版權(quán)聲明：
原創(chuàng)博主：牛哄哄的柯南
博主原文鏈接：https://keafmd.blog.csdn.net/
個(gè)人博客鏈接：https://www.keafmd.top/

看完如果對(duì)你有幫助，感謝點(diǎn)擊下面的點(diǎn)贊支持！
[哈哈][抱拳]

加油！

共同努力！

Keafmd

感謝支持牛哄哄的柯南，期待你的三連+關(guān)注~~

keep accumulate for my dream【共勉】

???????????????????????????????????????????????????????↓ ? ↓ ? ↓ ? ↓ ? ↓ ? ↓ ?