シーン
SpringBoot + VueはWebSocketを統合して、フロントエンドとバックエンドのメッセージプッシュを実装します。
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/114392573
マイクロサービスバージョンに従って、ローカルで環境を構築し、フロントエンドプロジェクトとバックエンドプロジェクトを実行する方法を教える場合：
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/109363303
上記では、SpringCloudでWebSocketを使用する場合、SpringBoot + Vueに基づいてWebSocketを使用するプロセスと、SpringCloud（Ruoyiマイクロサービスバージョン）でプロジェクトを構築するプロセスを紹介しました。
注意：
ブログ：
https：//blog.csdn.net/badao_liumang_qizhi
パブリック
アカウントをフォローする横暴
なプログラマープログラミング関連の電子書籍、チュートリアルプッシュ、無料ダウンロードを入手してください。
成し遂げる
まず、WebSocketを統合する必要があるサービスの下にWebSocketの依存関係を追加します
<!-- WebSocket-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>ここでは、時限タスクサービスの下に配置されます
次に、プロジェクトパッケージパスの下に新しい構成ディレクトリを作成し、このディレクトリに新しいWebSocketConfig構成クラスを作成します。
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}次に、パッケージの下に新しいWebSocketディレクトリを作成し、このディレクトリに新しいWebSocketClientクライアントエンティティクラスを作成して、接続されたセッションuriを格納します。
import javax.websocket.Session;
public class WebSocketClient {
// 与某个客户端的连接会话，需要通过它来给客户端发送数据
private Session session;
//连接的uri
private String uri;
public Session getSession() {
return session;
}
public void setSession(Session session) {
this.session = session;
}
public String getUri() {
return uri;
}
public void setUri(String uri) {
this.uri = uri;
}
}次に、このディレクトリに新しいWebSocketServiceサービスクラスを作成します
import org.apache.commons.lang.StringUtils;
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.concurrent.ConcurrentHashMap;
@ServerEndpoint(value = "/websocket/{userName}")
@Component
public class WebSocketService {
private static final Logger log = LoggerFactory.getLogger(WebSocketService.class);
//静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
private static int onlineCount = 0;
//concurrent包的线程安全Set，用来存放每个客户端对应的WebSocketServer对象。
private static ConcurrentHashMap<String, WebSocketClient> webSocketMap = new ConcurrentHashMap<>();
/**与某个客户端的连接会话，需要通过它来给客户端发送数据*/
private Session session;
/**接收userName*/
private String userName="";
/**
* 连接建立成功调用的方法*/
@OnOpen
public void onOpen(Session session, @PathParam("userName") String userName) {
if(!webSocketMap.containsKey(userName))
{
addOnlineCount(); // 在线数 +1
}
this.session = session;
this.userName= userName;
WebSocketClient client = new WebSocketClient();
client.setSession(session);
client.setUri(session.getRequestURI().toString());
webSocketMap.put(userName, client);
log.info("----------------------------------------------------------------------------");
log.info("用户连接:"+userName+",当前在线人数为:" + getOnlineCount());
try {
sendMessage("来自后台的反馈：连接成功");
} catch (IOException e) {
log.error("用户:"+userName+",网络异常!!!!!!");
}
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose() {
if(webSocketMap.containsKey(userName)){
webSocketMap.remove(userName);
if(webSocketMap.size()>0)
{
//从set中删除
subOnlineCount();
}
}
log.info("----------------------------------------------------------------------------");
log.info(userName+"用户退出,当前在线人数为:" + getOnlineCount());
}
/**
* 收到客户端消息后调用的方法
*
* @param message 客户端发送过来的消息*/
@OnMessage
public void onMessage(String message, Session session) {
log.info("收到用户消息:"+userName+",报文:"+message);
//可以群发消息
//消息保存到数据库、redis
if(StringUtils.isNotBlank(message)){
}
}
/**
*
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error) {
log.error("用户错误:"+this.userName+",原因:"+error.getMessage());
error.printStackTrace();
}
/**
* 连接服务器成功后主动推送
*/
public void sendMessage(String message) throws IOException {
synchronized (session){
this.session.getBasicRemote().sendText(message);
}
}
/**
* 向指定客户端发送消息
* @param userName
* @param message
*/
public static void sendMessage(String userName,String message){
try {
WebSocketClient webSocketClient = webSocketMap.get(userName);
if(webSocketClient!=null){
webSocketClient.getSession().getBasicRemote().sendText(message);
}
} catch (IOException e) {
e.printStackTrace();
throw new RuntimeException(e.getMessage());
}
}
public static synchronized int getOnlineCount() {
return onlineCount;
}
public static synchronized void addOnlineCount() {
WebSocketService.onlineCount++;
}
public static synchronized void subOnlineCount() {
WebSocketService.onlineCount--;
}
public static void setOnlineCount(int onlineCount) {
WebSocketService.onlineCount = onlineCount;
}
public static ConcurrentHashMap<String, WebSocketClient> getWebSocketMap() {
return webSocketMap;
}
public static void setWebSocketMap(ConcurrentHashMap<String, WebSocketClient> webSocketMap) {
WebSocketService.webSocketMap = webSocketMap;
}
public Session getSession() {
return session;
}
public void setSession(Session session) {
this.session = session;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
}ここで紹介したWebSocketClientは上記で新しく作成されたものであることに注意してください
ゲートウェイの構成ファイルを見つけます。ここでは、構成センターとしてNacosを使用します。権限認証のためにWebSocketパスを手放します
以下は、ruoyi-gateway-dev.xmlの最後にあるignore-whitesの下に追加されたものです。
- /schedule/websocket/**
これは、WebSocketを時限タスクのサービスの下に置くためのものです。このサービスのルートは、ゲートウェイの構成ファイルにもあります。
次に、簡略化とデモンストレーションのために、ここでは、WebSocket接続を使用するときにゲートウェイを経由せずに、時間指定タスクサービスの下でポートのサービスを直接呼び出します。
プッシュをテストするには、自分で解決できるWebSocketクライアントテストツールを使用するか、次のツールを使用する必要があります
https://download.csdn.net/download/BADAO_LIUMANG_QIZHI/15630118
ここで、9203は、ゲートウェイのポートではなく、特定の時限タスクサービスのアドレスとして直接使用され、接続されたアドレスは次のようになります。
ws：// localhost：9203 / websocket / badao
Badaoは渡されたUserNameパラメータです。アドレスを入力した後、[接続]をクリックすると、接続が成功したことがわかります。
そして、[データの送信]をクリックします
バックグラウンドでも受信されます。
次に、バックグラウンドでテストインターフェイスを作成します
@RestController
@RequestMapping("/schedule/websocket")
public class WebSocketTestController {
@GetMapping("/push")
public void push(SysJobLog sysJobLog)
{
WebSocketService.sendMessage("badao","badao");
}
}このインターフェースを呼び出した後、クライアントは送信されたデータも受信します
これは、クライアントツールを使用してWebSocketをテストすることです。その後、フロントエンドのVue統合WebSocketは、上記のブログの統合プロセスと同じです。