1. vue代碼

methods: { //在方法里調用 this.websocketsend()發送數據給服務器 onConfirm () { //需要傳輸的數據 let data = { code: 1, item: ‘傳輸的數據’ } 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 () { // 連接建立之后執行send方法發送數據 let data = { code: 0, msg: ’這是client：初次連接’ } this.websocketsend(JSON.stringify(data)) }, websocketonerror () { console.log( ’WebSocket連接失敗’) }, websocketonmessage (e) { // 數據接收 console.log(’數據接收’ + e.data) }, websocketsend (Data) { // 數據發送 this.websock.send(Data) }, websocketclose (e) { // 關閉 console.log(’已關閉連接’, e) } }, created () { console.log(’created’) this.initWebSocket() }, data () { return { websocket: null } }, destroyed () { this.websock.close() // 離開路由之后斷開websocket連接 }

2. java代碼

項目引入tomcat安裝目錄里的兩個依賴包

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')); // 發送數據給服務端 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; }}

在項目別的類可通過new WebSocket()向客戶端發送數據

WebSocket ws = new WebSocket();

ws.sendMessageAll(JSON.toJSONString(rs));

以上這篇Vue+Java 通過websocket實現服務器與客戶端雙向通信操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。