<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        微信小程序使用websocket通訊的demo,含前后端代碼,親測可用

        來源:懂視網 責編:小采 時間:2020-11-27 21:56:29
        文檔

        微信小程序使用websocket通訊的demo,含前后端代碼,親測可用

        微信小程序使用websocket通訊的demo,含前后端代碼,親測可用:0、概述websocket (1) 個人總結:后臺設置了websocket地址,服務器開啟后等待有人去連接它。 一個客戶端一打開就去連接websocket地址,同時傳遞某些識別參數。這樣一來后臺和客戶端連接成功了,然后后臺就可以發消息給客戶端了,(客戶端也可以再回話給后臺)
        推薦度:
        導讀微信小程序使用websocket通訊的demo,含前后端代碼,親測可用:0、概述websocket (1) 個人總結:后臺設置了websocket地址,服務器開啟后等待有人去連接它。 一個客戶端一打開就去連接websocket地址,同時傳遞某些識別參數。這樣一來后臺和客戶端連接成功了,然后后臺就可以發消息給客戶端了,(客戶端也可以再回話給后臺)

        0、概述websocket

        (1) 個人總結:后臺設置了websocket地址,服務器開啟后等待有人去連接它。 一個客戶端一打開就去連接websocket地址,同時傳遞某些識別參數。這樣一來后臺和客戶端連接成功了,然后后臺就可以發消息給客戶端了,(客戶端也可以再回話給后臺)。

        (2) socket叫套接字,應用程序用socket向網絡發出請求或者應答網絡請求。

        (3) 官方解釋的socket 建立連接四步驟:

        服務器端開啟socket,然后accep方法處于監聽狀態,等待客戶端的連接。

         客戶端開啟,指定服務器名稱和端口號來請求連接服務器端的socket。
         服務器端收到客戶端連接請求,返回連接確認。在服務器端,accept() 方法返回服務器上一個新的 socket 引用,該 socket 連接到客戶端的 socket。
         客戶端收到連接確認,兩個人就連接好了,雙方開始通訊

        (4)注意:

        客戶端的輸出流連接到服務器端的輸入流,而客戶端的輸入流連接到服務器端的輸出流。
        TCP 是一個雙向的通信協議,因此數據可以通過兩個數據流在同一時間發送.

        1、app.js寫法

        在app.js下添加三個函數openSocket(), closeSocket(),sendMessage(),在app初始化的onLunch函數里面調用openSocket(),這樣子用戶一進入小程序就會自動連接websocket

        App({
         globalData: {
         socketStatus: 'closed',
         },
         onLaunch: function() { 
         var that = this;
         if (that.globalData.socketStatus === 'closed') {
         that.openSocket();
         }
         }
         openSocket() {
         //打開時的動作
         wx.onSocketOpen(() => {
         console.log('WebSocket 已連接')
         this.globalData.socketStatus = 'connected';
         this.sendMessage();
         })
         //斷開時的動作
         wx.onSocketClose(() => {
         console.log('WebSocket 已斷開')
         this.globalData.socketStatus = 'closed'
         })
         //報錯時的動作
         wx.onSocketError(error => {
         console.error('socket error:', error)
         })
         // 監聽服務器推送的消息
         wx.onSocketMessage(message => {
         //把JSONStr轉為JSON
         message = message.data.replace(" ", "");
         if (typeof message != 'object') {
         message = message.replace(/\ufeff/g, ""); //重點
         var jj = JSON.parse(message);
         message = jj;
         }
         console.log("【websocket監聽到消息】內容如下:");
         console.log(message);
         })
         // 打開信道
         wx.connectSocket({
         url: "ws://" + "localhost" + ":8888",
         })
         },
         //關閉信道
         closeSocket() {
         if (this.globalData.socketStatus === 'connected') {
         wx.closeSocket({
         success: () => {
         this.globalData.socketStatus = 'closed'
         }
         })
         }
         },
         //發送消息函數
         sendMessage() {
         if (this.globalData.socketStatus === 'connected') {
         //自定義的發給后臺識別的參數 ,我這里發送的是name
         wx.sendSocketMessage({
         data: "{\"name\":\"" + wx.getStorageSync('openid') + "\"}" 
         })
         }
         },
        })

        2、后臺寫法

        主要有兩個類,一個是websocket啟動監聽交互類,一個是存儲當前所有已經連接好的用戶池以及對這些用戶的操作封裝類
         然后在項目啟動類里面調用websocke啟動監聽交互類的啟動方法。(如果是springboot項目,就直接在主類中調用)

        (1)導入包

        <dependency>
         <groupId>org.java-websocket</groupId>
         <artifactId>Java-WebSocket</artifactId>
         <version>1.3.0</version>
        </dependency>
          

        (2)啟動websocket的方法,放在啟動類里面   

         /**
         * 啟動websocket
         */
         public void startWebsocketInstantMsg() {
         WebSocketImpl.DEBUG = false;
         MyWebScoket s;
         s = new MyWebScoket(8888);
         s.start();
         System.out.println("websocket啟動成功");
         }

        (3)websocket監聽交互類如下

         該類涉及的監聽方法有:監聽用戶連入;監聽用戶斷開;監聽消息發過來;監聽有錯誤等

        import com.alibaba.fastjson.JSONObject;
        import org.java_websocket.WebSocket;
        import org.java_websocket.handshake.ClientHandshake;
        import org.java_websocket.server.WebSocketServer;
        import java.net.InetSocketAddress;
        import java.net.UnknownHostException;
        import java.util.Map;
        public class MyWebScoket extends WebSocketServer {
         public MyWebScoket() throws UnknownHostException {
         super();
         }
         public MyWebScoket(int port) {
         super(new InetSocketAddress(port));
         }
         public MyWebScoket(InetSocketAddress address) {
         super(address);
         }
         @Override
         public void onOpen(WebSocket conn, ClientHandshake handshake) {
         // ws連接的時候觸發的代碼,onOpen中我們不做任何操作
         }
         @Override
         public void onClose(WebSocket conn, int code, String reason, boolean remote) {
         //斷開連接時候觸發代碼
         userLeave(conn);
         System.out.println(reason);
         }
         @Override
         public void onMessage(WebSocket conn, String message) {
         //有用戶連接進來
         Map<String, String> obj = (Map<String,String>) JSONObject.parse(message);
         System.out.println(message);
         String username = obj.get("name");
         userJoin(conn, username);
         }
         @Override
         public void onError(WebSocket conn, Exception ex) {
         //錯誤時候觸發的代碼
         System.out.println("on error");
         ex.printStackTrace();
         }
         /**
         * 去除掉失效的websocket鏈接
         */
         private void userLeave(WebSocket conn){
         WsPool.removeUser(conn);
         }
         /**
         * 將websocket加入用戶池
         * @param conn
         * @param userName
         */
         private void userJoin(WebSocket conn,String userName){
         WsPool.addUser(userName, conn);
         }
        }

        (4)用戶池類如下

         該類包含的方法有:從池中移除或添加用戶;獲取當前在線的所有用戶;通過參數"name"獲取某個用戶的當前WebSocket連接;給某個WebSocket連接發送消息;為所有WebSocket連接發送消息等等

        import com.td.yousan.util.StringUtils;
        import org.java_websocket.WebSocket;
        import java.util.*;
        public class WsPool {
         private static final Map<WebSocket, String> wsUserMap = new HashMap<WebSocket, String>();
         /**
         * 通過websocket連接獲取其對應的用戶
         */
         public static String getUserByWs(WebSocket conn) {
         return wsUserMap.get(conn);
         }
         /**
         * 根據userName獲取WebSocket,這是一個list,此處取第一個
         * 因為有可能多個websocket對應一個userName(但一般是只有一個,因為在close方法中,我們將失效的websocket連接去除了)
         */
         public static WebSocket getWsByUser(String userName) {
         Set<WebSocket> keySet = wsUserMap.keySet();
         synchronized (keySet) {
         for (WebSocket conn : keySet) {
         String cuser = wsUserMap.get(conn);
         if (cuser.equals(userName)) {
         return conn;
         }
         }
         }
         return null;
         }
         /**
         * 向連接池中添加連接
         */
         public static void addUser(String userName, WebSocket conn) {
         wsUserMap.put(conn, userName); // 添加連接
         }
         /**
         * 獲取所有連接池中的用戶,因為set是不允許重復的,所以可以得到無重復的user數組
         */
         public static Collection<String> getOnlineUser() {
         List<String> setUsers = new ArrayList<String>();
         Collection<String> setUser = wsUserMap.values();
         for (String u : setUser) {
         setUsers.add(u);
         }
         return setUsers;
         }
         /**
         * 移除連接池中的連接
         */
         public static boolean removeUser(WebSocket conn) {
         if (wsUserMap.containsKey(conn)) {
         wsUserMap.remove(conn); // 移除連接
         return true;
         } else {
         return false;
         }
         }
         /**
         * 向特定的用戶發送數據
         */
         public static void sendMessageToUser(WebSocket conn, String message) {
         if (null != conn && null != wsUserMap.get(conn)) {
         conn.send(message);
         }
         }
         /**
         * 向所有用戶名中包含某個特征得用戶發送消息
         */
         public static void sendMessageToSpecialUser(String message,String special) {
         Set<WebSocket> keySet = wsUserMap.keySet();
         if (special == null) {
         special = "";
         }
         synchronized (keySet) {
         for (WebSocket conn:keySet) {
         String user = wsUserMap.get(conn);
         try {
         if (user != null) {
         String [] cus = user.split("_");
         if (!StringUtils.isNullOrEmpty(cus[0])) {
         String cusDot = "," + cus[0] + ",";
         if (cusDot.contains(","+special+",")) {
         conn.send(message);
         }
         }else {
         conn.send(message);
         }
         }
         }catch (Exception e) {
         e.printStackTrace();
         //wsUserMap.remove(conn);
         }
         }
         }
         }
         /**
         * 向所有的用戶發送消息
         */
         public static void sendMessageToAll(String message) {
         Set<WebSocket> keySet = wsUserMap.keySet();
         synchronized (keySet) {
         for (WebSocket conn : keySet) {
         String user = wsUserMap.get(conn);
         if (user != null) {
         conn.send(message);
         }
         }
         }
         }
        }

        總結

        以上所述是小編給大家介紹的微信小程序使用websocket通訊的demo,含前后端代碼,親測可用,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家的!

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        微信小程序使用websocket通訊的demo,含前后端代碼,親測可用

        微信小程序使用websocket通訊的demo,含前后端代碼,親測可用:0、概述websocket (1) 個人總結:后臺設置了websocket地址,服務器開啟后等待有人去連接它。 一個客戶端一打開就去連接websocket地址,同時傳遞某些識別參數。這樣一來后臺和客戶端連接成功了,然后后臺就可以發消息給客戶端了,(客戶端也可以再回話給后臺)
        推薦度:
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: heyzo亚洲精品日韩| 日韩免费无砖专区2020狼| 伊人久久大香线蕉免费视频| 一区二区三区无码视频免费福利| 91麻豆国产免费观看| AV免费网址在线观看| 久久久久亚洲AV无码专区桃色| 久久久久亚洲av无码尤物| 亚洲女人初试黑人巨高清| 亚洲av无码专区首页| 久久精品免费电影| 免费人成视频x8x8入口| 亚洲成人福利网站| 最近中文字幕无免费视频| 中文字幕专区在线亚洲| 免费无码一区二区三区蜜桃| 亚洲avav天堂av在线不卡| 亚洲欧洲免费无码| 亚洲AV无码不卡在线播放| 美女又黄又免费的视频| 4虎1515hh永久免费| 国产亚洲老熟女视频| 免费国产污网站在线观看| 亚洲第一精品电影网| 日本道免费精品一区二区| 亚洲最大在线视频| 国产精品jizz在线观看免费| 亚洲国产日韩在线一区| 免费国产污网站在线观看15| 国产亚洲精品精华液| 全部一级一级毛片免费看| 香蕉视频在线观看免费国产婷婷| 亚洲精品国产福利片| 情侣视频精品免费的国产| a毛片视频免费观看影院| 亚洲人成网站18禁止久久影院 | 无码 免费 国产在线观看91| 免费看a级黄色片| 免费毛片在线看不用播放器| 亚洲色精品VR一区区三区| 4虎永免费最新永久免费地址|