Vue+Javaはwebsocketを通じてサーバーとクライアントの双方向通信操作を実現します。
1.vueコード
プロジェクトはtomcatを導入してカタログの中の2つの依存カバンをインストールします。
WebSocket ws=new Websocket()
ws.sendMessage All(JSON.toJSONString(rs));
以上のこのVue+Javaはwebsocketを通じてサーバーとクライアントの双方向通信操作を実現しました。つまり、小編集は皆さんのすべての内容を共有しました。
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を導入してカタログの中の2つの依存カバンをインストールします。
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.sendMessage All(JSON.toJSONString(rs));
以上のこのVue+Javaはwebsocketを通じてサーバーとクライアントの双方向通信操作を実現しました。つまり、小編集は皆さんのすべての内容を共有しました。