欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue+Java 通過websocket實現(xiàn)服務器與客戶端雙向通信操作

 更新時間:2020年09月22日 10:48:53   作者:oayoat  
這篇文章主要介紹了Vue+Java 通過websocket實現(xiàn)服務器與客戶端雙向通信操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

1. vue代碼

methods: {
 //在方法里調用 this.websocketsend()發(fā)送數(shù)據(jù)給服務器
  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) { // 關閉
   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"));

  // 發(fā)送數(shù)據(jù)給服務端
  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)服務器與客戶端雙向通信操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關文章

  • vue項目實現(xiàn)webpack配置代理,解決跨域問題

    vue項目實現(xiàn)webpack配置代理,解決跨域問題

    這篇文章主要介紹了vue項目實現(xiàn)webpack配置代理,解決跨域問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue中實現(xiàn)動畫效果的多種方法小結

    Vue中實現(xiàn)動畫效果的多種方法小結

    平時我們能在網(wǎng)頁上看到很多動畫效果,這些效果看起來就很引人注目,我們是不是也可以在自己的項目中添加一些動畫效果,讓我們的頁面看起來更加的高端大氣上檔次,博人眼球,所以本文給大家介紹了Vue中實現(xiàn)動畫效果的多種方法,需要的朋友可以參考下
    2024-07-07
  • vue2.6.10+vite2開啟template模板動態(tài)編譯的過程

    vue2.6.10+vite2開啟template模板動態(tài)編譯的過程

    這篇文章主要介紹了vue2.6.10+vite2開啟template模板動態(tài)編譯,本文結合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-02-02
  • 如何構建一個Vue插件并生成npm包

    如何構建一個Vue插件并生成npm包

    這篇文章主要介紹了如何構建一個Vue插件并生成npm包,幫助大家更好的理解和使用vue,方便以后的開發(fā),感興趣的朋友可以了解下
    2020-10-10
  • vue使用openlayers創(chuàng)建地圖

    vue使用openlayers創(chuàng)建地圖

    這篇文章主要為大家詳細介紹了vue項目中使用openlayers創(chuàng)建地圖,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue項目中定時器無法清除的原因解決

    vue項目中定時器無法清除的原因解決

    頁面有定時器,并且定時器在離開頁面時,有清除,本文主要介紹了vue項目中定時器無法清除的原因解決,具有一定的參考價值,感興趣的可以了解一下
    2024-02-02
  • Vue.js列表渲染綁定jQuery插件的正確姿勢

    Vue.js列表渲染綁定jQuery插件的正確姿勢

    這篇文章主要為大家詳細介紹了Vue.js列表渲染綁定jQuery插件的正確姿勢,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • ElementUI中el-table表格組件如何自定義表頭

    ElementUI中el-table表格組件如何自定義表頭

    最近需要做一個el-table的表格,表頭需要顯示提示信息,本文主要介紹了ElementUI中el-table表格組件如何自定義表頭,具有一定的參考價值,感興趣的可以了解一下
    2023-09-09
  • 解決Antd Table表頭加Icon和氣泡提示的坑

    解決Antd Table表頭加Icon和氣泡提示的坑

    這篇文章主要介紹了解決Antd Table表頭加Icon和氣泡提示的坑,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • 解決vue點擊控制單個樣式的問題

    解決vue點擊控制單個樣式的問題

    今天小編就為大家分享一篇解決vue點擊控制單個樣式的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09

最新評論