Vue+Java 通過websocket實(shí)現(xiàn)服務(wù)器與客戶端雙向通信操作
1. vue代碼
methods: { //在方法里調(diào)用 this.websocketsend()發(fā)送數(shù)據(jù)給服務(wù)器 onConfirm () { //需要傳輸?shù)臄?shù)據(jù) let data = { code: 1, item: ‘傳輸?shù)臄?shù)據(jù)' } this.websocketsend(JSON.stringify(data)) }, /* */ initWebSocket () { // 初始化weosocket let userinfo = getUserInfo() let username = userinfo.waiter_userid this.websock = new WebSocket('ws://' + baseURL + '/websocket/' + username) this.websock.onmessage = this.websocketonmessage this.websock.onerror = this.websocketonerror this.websock.onopen = this.websocketonopen this.websock.onclose = this.websocketclose }, websocketonopen () { // 連接建立之后執(zhí)行send方法發(fā)送數(shù)據(jù) let data = { code: 0, msg: '這是client:初次連接' } this.websocketsend(JSON.stringify(data)) }, websocketonerror () { console.log( 'WebSocket連接失敗') }, websocketonmessage (e) { // 數(shù)據(jù)接收 console.log('數(shù)據(jù)接收' + e.data) }, websocketsend (Data) { // 數(shù)據(jù)發(fā)送 this.websock.send(Data) }, websocketclose (e) { // 關(guān)閉 console.log('已關(guān)閉連接', e) } }, created () { console.log('created') this.initWebSocket() }, data () { return { websocket: null } }, destroyed () { this.websock.close() // 離開路由之后斷開websocket連接 }
2. java代碼
項(xiàng)目引入tomcat安裝目錄里的兩個(gè)依賴包
package diancan.servlet; import java.io.IOException; import java.util.Map; import java.util.concurrent.ConcurrentHashMap; import javax.websocket.OnClose; import javax.websocket.OnError; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.PathParam; import javax.websocket.server.ServerEndpoint; @ServerEndpoint("/websocket/{username}") public class WebSocket { private static int onlineCount = 0; private static Map<String, WebSocket> clients = new ConcurrentHashMap<String, WebSocket>(); private Session session; private String username; @OnOpen public void onOpen(@PathParam("username") String username, Session session) throws IOException { this.username = username; this.session = session; addOnlineCount(); clients.put(username, this); System.out.println("已連接" + username); } @OnClose public void onClose() throws IOException { clients.remove(username); subOnlineCount(); } @OnMessage public void onMessage(String message) throws IOException { DataWrapper res = new DataWrapper(); System.out.println("message:" + message); JSONObject req = JSONObject.parseObject(message); // System.out.println("item:" + req.getJSONObject("item")); // System.out.println("item:" + req.getInteger("code")); // 發(fā)送數(shù)據(jù)給服務(wù)端 sendMessageAll(JSON.toJSONString(res)); } @OnError public void onError(Session session, Throwable error) { error.printStackTrace(); } public void sendMessageTo(String message, String To) throws IOException { // session.getBasicRemote().sendText(message); // session.getAsyncRemote().sendText(message); for (WebSocket item : clients.values()) { if (item.username.equals(To)) item.session.getAsyncRemote().sendText(message); } } public void sendMessageAll(String message) throws IOException { for (WebSocket item : clients.values()) { item.session.getAsyncRemote().sendText(message); } } public static synchronized int getOnlineCount() { return onlineCount; } public static synchronized void addOnlineCount() { WebSocket.onlineCount++; } public static synchronized void subOnlineCount() { WebSocket.onlineCount--; } public static synchronized Map<String, WebSocket> getClients() { return clients; } }
在項(xiàng)目別的類可通過new WebSocket()向客戶端發(fā)送數(shù)據(jù)
WebSocket ws = new WebSocket();
ws.sendMessageAll(JSON.toJSONString(rs));
以上這篇Vue+Java 通過websocket實(shí)現(xiàn)服務(wù)器與客戶端雙向通信操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue項(xiàng)目實(shí)現(xiàn)webpack配置代理,解決跨域問題
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)webpack配置代理,解決跨域問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04Vue中實(shí)現(xiàn)動畫效果的多種方法小結(jié)
平時(shí)我們能在網(wǎng)頁上看到很多動畫效果,這些效果看起來就很引人注目,我們是不是也可以在自己的項(xiàng)目中添加一些動畫效果,讓我們的頁面看起來更加的高端大氣上檔次,博人眼球,所以本文給大家介紹了Vue中實(shí)現(xiàn)動畫效果的多種方法,需要的朋友可以參考下2024-07-07vue2.6.10+vite2開啟template模板動態(tài)編譯的過程
這篇文章主要介紹了vue2.6.10+vite2開啟template模板動態(tài)編譯,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-02-02vue項(xiàng)目中定時(shí)器無法清除的原因解決
頁面有定時(shí)器,并且定時(shí)器在離開頁面時(shí),有清除,本文主要介紹了vue項(xiàng)目中定時(shí)器無法清除的原因解決,具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02