vue 可視化開發工具，springboot + vue_Springboot+VUE---實現簡單的websocket

2023-10-24 阅读 31 评论 0

摘要：什么是websocketWebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間

什么是websocket

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。
WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，并進行雙向數據傳輸。
vue 可視化開發工具。在 WebSocket API 中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。
現在，很多網站為了實現推送技術，所用的技術都是 Ajax 輪詢。輪詢是在特定的的時間間隔(如每1秒)，由瀏覽器對服務器發出HTTP請求，然后由服務器返回最新的數據給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數據可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。
HTML5 定義的 WebSocket 協議，能更好的節省服務器資源和帶寬，并且能夠更實時地進行通訊。

技術實現-springboot部分

pom.xml引入socket依賴

vue開發， org.springframework.boot
spring-boot-starter-websocket

2.引入ServerEndpointExporter，這個bean會自動注冊使用了@ServerEndpoint注解聲明的Websocket endpoint。

Vue cli、package com.fire.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
Springboot教程。import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configuration
public class WebSocketConfig {
eclipse vue？/**
* 注入ServerEndpointExporter，
* 這個bean會自動注冊使用了@ServerEndpoint注解聲明的Websocket endpoint
*/
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}

3,wesocket供外部調用的方法

package com.fire.util;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.CopyOnWriteArraySet;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import org.springframework.stereotype.Component;
@Component
@ServerEndpoint("/websocket/{shopId}")//此注解相當于設置訪問URL
public class WebSocket {
private Session session;
private static CopyOnWriteArraySet webSockets =new CopyOnWriteArraySet<>();
private static Map sessionPool = new HashMap();
@OnOpen
public void onOpen(Session session,@PathParam(value="shopId")String shopId){
this.session=session;
webSockets.add(this);
sessionPool.put(shopId, session);
System.out.println("【websockect消息】有新的連接，總數為"+webSockets.size());
}
@OnClose
public void onClose(){
webSockets.remove(this);
System.out.println("【websockect消息】斷開連接，總數為"+webSockets.size());
}
@OnMessage
public void onMessage(String message){
System.out.println("【websocket消息】收到客戶端消息:"+message);
this.sendAllMessage(message);
}
//廣播消息
public static void sendAllMessage(String message){
for(WebSocket webSocket:webSockets){
System.out.println("【websocket消息】廣播消息:"+message);
try {
webSocket.session.getAsyncRemote().sendText(message);
} catch (Exception e) {
e.printStackTrace();
}
}
}
//單點消息
public static void sendOneMessage(String shopId,String message){
System.out.println("aaaaaaaaaaaaaa");
Session session=sessionPool.get("shopId");
if(session!=null){
try {
session.getAsyncRemote().sendText(message);
} catch (Exception e) {
e.printStackTrace();
}
}
}
public static void sendInfo(String Message) throws IOException{
sendAllMessage(Message);
}
public static void main(String[] args) {
try {
sendInfo("哈哈哈哈哈覺得封建士大夫");
} catch (IOException e) {
e.printStackTrace();
}
}
}

4.測試類

package com.fire.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.fire.util.WebSocket;
@RestController
@RequestMapping("api")
public class socketTestController {
@Autowired
private WebSocket webSocket;
@RequestMapping("/sendAllMessage")
public String test(){
String message="hahahahhahhhdfsdfsd";
webSocket.sendAllMessage(message);
return "xiao xi fa song wan cheng";
}
@RequestMapping("/sendOneMessage")
public String sendOneMessage(){
String message="發送單點消息";
webSocket.sendAllMessage(message);
return "單點消息發送完成";
}
}