文章目錄

• 后端代碼
• • websocket接口：
  • 開啟線程監聽tcp連接：
• 前端代碼

---

流程：
后端開啟線程監聽某個端口是否接收到tcp的數據，如果接收到數據則向前端推送消息，前端接收到消息后進行接收消息的回調方法，將返回相應數據給后端，后端將生成數據，插入到數據庫中

后端代碼

//這個配置一定要加，否則websocket不生效 @Configuration public class WebsocketConfig {@Beanpublic ServerEndpointExporter serverEndpointExporter(){return new ServerEndpointExporter();} }

websocket接口：

@Controller @ServerEndpoint(value = "/mywebsocket/{id}") public class WebsocketServlet {//concurrent包的線程安全Set，用來存放每個客戶端對應的MyWebSocket對象，若要實現服務端與單一客戶端通信的話，可以使用Map來存放，其中Key可以為用戶標識private static CopyOnWriteArraySet<WebsocketServlet> webSocketSet = new CopyOnWriteArraySet<>();//這個session不是HttpSession，相當于用戶的唯一標識，用它進行指定用戶通訊private Session session = null;/*** 這個方法是根據自己需要添加的方法* 發送自定義信號，1表示告訴前臺，數據庫發生改變了，需要刷新* @throws IOException*/private void sendMessage() throws IOException{//群發消息System.out.println("執行群發消息，sendMessage");for(WebsocketServlet item:webSocketSet){try{item.session.getBasicRemote().sendText("1");}catch (IOException e){e.printStackTrace();;continue;}}}/*** 建立websocket連接時調用* @param* @return*/@OnOpenpublic void onOpen(Session session){System.out.println("Session:"+session.getId()+"已經建立連接");this.session=session;webSocketSet.add(this);//加入到set中try {session.getBasicRemote().sendText("Connection Established");} catch (IOException e) {e.printStackTrace();}}/*** 接收到客戶消息時用* @param* @return*/@OnMessagepublic void onMessage(String message){System.out.println("Message" + ":"+message);}/*** 關閉連接時調用* @param* @return*/@OnClosepublic void onClose(Session session){webSocketSet.remove(this);//從set中刪除System.out.println("session"+session.getId()+"has closed");}/*** 注意：OnError 只能出現一次，其中的參數都是可選的* @param* @return*/public void onError(Session session,Throwable t){t.printStackTrace();} //向數據庫插入一個nameprivate boolean submit(String name) {return true;}public void sendMessage(String message){for (WebsocketServlet webSocket : webSocketSet){System.out.println("廣播消息:"+message);try {webSocket.session.getBasicRemote().sendText(message);} catch (IOException e) {e.printStackTrace();}}} }

開啟線程監聽tcp連接：

/*** @Author* @Description* @Date 12.24**/ @Component public class TCPserver2 implements Callable {@AutowiredWebsocketServlet websocketServlet;@Overridepublic Object call() throws Exception {ServerSocket server = new ServerSocket(8005);while (true) {//（2）開始在這里暫停等待接收客戶端的連接,得到一個端到端的Socket管道Socket socket = server.accept();new ServerReadThread(socket).start();System.out.println(socket.getRemoteSocketAddress() + "上線了！");}}class ServerReadThread extends Thread {private Socket socket;public ServerReadThread(Socket socket) {this.socket = socket;}@SneakyThrows@Overridepublic void run() {try ( // 創建一個ServerSocket監聽8080端口的客戶端請求// 由Socket獲得輸入流，并創建緩沖輸入流BufferedInputStream in = new BufferedInputStream(socket.getInputStream());) // 由文件輸出流創建緩沖輸出流{ // 準備一個緩沖區byte[] buffer = new byte[1024]; // 首次從Socket讀取數據int sum = 0;int len = in.read(buffer);if (len != -1) { // 寫入數據到文件String msg = buffer.toString();System.out.println("8004接收到消息：" + msg);websocketServlet.sendMessage("清洗結束！");}// return 1;} catch (IOException e) {e.printStackTrace();// return 0;} finally {try {socket.close();System.out.println("closed");} catch (Exception e) {e.printStackTrace();}}}} }

主啟動類加上：

TCPserver2 tcPserver2 = SpringUtils.getBean(TCPserver2.class);FutureTask<Integer> endSignal = new FutureTask<Integer>(tcPserver2);new Thread(endSignal).start();

前端代碼

data () {return {endsign:'no'}},mounted(){this. createWebsocket();}methods:{// websocket的方法createWebsocket() {const httpURL = process.env.VUE_APP_DOMAIN;this.websocket = new WebSocket(`ws://192.168.100.88:9001/mywebsocket/1`);// 連接發生錯誤的回調方法this.websocket.onerror = this.websocketOnerror;// 連接成功建立的回調方法this.websocket.onopen = this.websocketOnopen;// 接收到消息的回調方法this.websocket.onmessage = this.websocketOnmessage;// 連接關閉的回調方法this.websocket.onclose = this.websocketOnclose;// 監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket連接，防止連接還沒斷開就關閉窗口，server端會拋異常。this.websocket.onbeforeunload = this.websocketOnbeforeunload;},// 連接發生錯誤的回調方法websocketOnerror() {console.log('連接發生錯誤的回調方法');},// 連接成功建立的回調方法websocketOnopen() {console.log('連接成功建立的回調方法');},// 接收到消息的回調方法websocketOnmessage(event) {const data = event.data;console.log('接收到消息的回調方法', data);this.sendTime()this.endsign='yes'},// 連接關閉的回調方法websocketOnclose() {console.log('連接關閉的回調方法');},// 監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket連接，防止連接還沒斷開就關閉窗口，server端會拋異常websocketOnbeforeunload() {this.closeWebSocket();console.log('監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket連接，防止連接還沒斷開就關閉窗口，server端會拋異常');},// 關閉WebSocket連接closeWebSocket() {this.websocket.close();}}}

測試：
用網絡調試精靈發送給后端一個tcp連接，然后可以看到前端顯示接收到推送的消息：

后端也處理了數據并添加到了數據庫中：

總結

以上是生活随笔為你收集整理的springboot+vue用websocket消息推送和监听端口的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。