Vue+Java 通過websocket實現(xiàn)服務(wù)器與客戶端雙向通信操作
更新時間:2020年09月22日 10:48:53 作者:oayoat
這篇文章主要介紹了Vue+Java 通過websocket實現(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代碼
項目引入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"));
// 發(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;
}
}
在項目別的類可通過new WebSocket()向客戶端發(fā)送數(shù)據(jù)
WebSocket ws = new WebSocket();
ws.sendMessageAll(JSON.toJSONString(rs));
以上這篇Vue+Java 通過websocket實現(xiàn)服務(wù)器與客戶端雙向通信操作就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue項目實現(xiàn)webpack配置代理,解決跨域問題
這篇文章主要介紹了vue項目實現(xiàn)webpack配置代理,解決跨域問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04
vue2.6.10+vite2開啟template模板動態(tài)編譯的過程
這篇文章主要介紹了vue2.6.10+vite2開啟template模板動態(tài)編譯,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-02-02

