微信小程式+java後端整合筆記

weixin_33858249發表於2018-01-29
微信小程式Java後端筆記

用到的工具和技術.

1.微信web開發工具小程式版

2.Myeclipse 2014

3.WebSocket

4.Maven 3.3.9

5.Tomcat 7

步驟

   1.安裝配置Maven,使用Myeclipse建立web project 使用Maven專案結構. 具體步驟:點選開啟連結

   2.開啟微信web開發工具,由於是內部開發測試,故不要填寫 appID, 建立新專案,把專案放在Maven專案目錄下  src/main/webapp/專案名

   3.建立Websocket 實現握手通訊.

以下程式碼均來自網路資料.

java伺服器端:

 

[javascript] view plain copy
  1. package websocketTest;  
  2.   
  3. import java.io.IOException;  
  4. import java.util.concurrent.CopyOnWriteArraySet;  
  5.   
  6. import javax.websocket.*;  
  7. import javax.websocket.server.ServerEndpoint;  
  8.   
  9. /** 
  10.  * @ServerEndpoint 註解是一個類層次的註解，它的功能主要是將目前的類定義成一個websocket伺服器端, 
  11.  * 註解的值將被用於監聽使用者連線的終端訪問URL地址,客戶端可以通過這個URL來連線到WebSocket伺服器端 
  12.  */  
  13. @ServerEndpoint("/websocket")  
  14. public class TestWebSocket {  
  15.     //靜態變數，用來記錄當前線上連線數。應該把它設計成執行緒安全的。  
  16.     private static int onlineCount = 0;  
  17.   
  18.     //concurrent包的執行緒安全Set，用來存放每個客戶端對應的MyWebSocket物件。若要實現服務端與單一客戶端通訊的話，可以使用Map來存放，其中Key可以為使用者標識  
  19.     private static CopyOnWriteArraySet<TestWebSocket> webSocketSet = new CopyOnWriteArraySet<TestWebSocket>();  
  20.   
  21.     //與某個客戶端的連線會話，需要通過它來給客戶端傳送資料  
  22.     private Session session;  
  23.   
  24.     /** 
  25.      * 連線建立成功呼叫的方法 
  26.      * @param session  可選的引數。session為與某個客戶端的連線會話，需要通過它來給客戶端傳送資料 
  27.      */  
  28.     @OnOpen  
  29.     public void onOpen(Session session){  
  30.         this.session = session;  
  31.         webSocketSet.add(this);     //加入set中  
  32.         addOnlineCount();           //線上數加1  
  33.         System.out.println("有新連線加入！當前線上人數為" + getOnlineCount());  
  34.     }  
  35.   
  36.     /** 
  37.      * 連線關閉呼叫的方法 
  38.      */  
  39.     @OnClose  
  40.     public void onClose(){  
  41.         webSocketSet.remove(this);  //從set中刪除  
  42.         subOnlineCount();           //線上數減1  
  43.         System.out.println("有一連線關閉！當前線上人數為" + getOnlineCount());  
  44.     }  
  45.   
  46.     /** 
  47.      * 收到客戶端訊息後呼叫的方法 
  48.      * @param message 客戶端傳送過來的訊息 
  49.      * @param session 可選的引數 
  50.      */  
  51.     @OnMessage  
  52.     public void onMessage(String message, Session session) {  
  53.         System.out.println("來自客戶端的訊息:" + message);  
  54.         //群發訊息  
  55.         for(TestWebSocket item: webSocketSet){  
  56.             try {  
  57.                 item.sendMessage(message);  
  58.             } catch (IOException e) {  
  59.                 e.printStackTrace();  
  60.                 continue;  
  61.             }  
  62.         }  
  63.     }  
  64.   
  65.     /** 
  66.      * 發生錯誤時呼叫 
  67.      * @param session 
  68.      * @param error 
  69.      */  
  70.     @OnError  
  71.     public void onError(Session session, Throwable error){  
  72.         System.out.println("發生錯誤");  
  73.         error.printStackTrace();  
  74.     }  
  75.   
  76.     /** 
  77.      * 這個方法與上面幾個方法不一樣。沒有用註解，是根據自己需要新增的方法。 
  78.      * @param message 
  79.      * @throws IOException 
  80.      */  
  81.     public void sendMessage(String message) throws IOException{  
  82.         this.session.getBasicRemote().sendText(message);  
  83.         //this.session.getAsyncRemote().sendText(message);  
  84.     }  
  85.   
  86.     public static synchronized int getOnlineCount() {  
  87.         return onlineCount;  
  88.     }  
  89.   
  90.     public static synchronized void addOnlineCount() {  
  91.         TestWebSocket.onlineCount++;  
  92.     }  
  93.   
  94.     public static synchronized void subOnlineCount() {  
  95.         TestWebSocket.onlineCount--;  
  96.     }  
  97. }  
[javascript] view plain copy
  1. 微信小程式客戶端:  
[javascript] view plain copy
  1.   <pre name="code" class="javascript">var app = getApp()  
  2. Page({  
  3.   onLoad:function(){  
  4.   
  5.     wx.connectSocket({  
  6.       url: "ws://localhost:8080/TestYMG/websocket",  
  7.     })  
  8.     wx.onSocketOpen(function() {  
  9.       console.log('WebSocket連線已經開啟!')  
  10.     wx.sendSocketMessage({  
  11.       data: 'HELLO,WORLD'+Math.random()*0XFFFFFF.toString()  
  12.     })  
  13.     });  
  14.    wx.onSocketMessage(function(data) {  
  15.      console.log(data);  
  16.    });</pre><pre name="code" class="javascript">     //監聽是否關閉  
  17.    wx.onSocketClose(function() {  
  18.      console.log('WebSocket連線已經關閉!')  
  19.    });  
  20.   },</pre><pre name="code" class="javascript">    //手動關閉連線  
  21.   setclose:function(e){  
  22.     console.log('WebSocket連線正在關閉!')  
  23.     wx.closeSocket();  
  24.   
  25.   }  
  26.   
  27.     
  28. })  
  29. </pre><br>  
  30. <p></p>  
  31. <pre></pre>  
  32. <p></p>  
  33.                       
原文地址http://www.bieryun.com/671.html

相關文章