微信小程序+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 webSocketSet = new CopyOnWriteArraySet();  
  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.   "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.    });"code" class="javascript">     //监听是否关闭  
  17.    wx.onSocketClose(function() {  
  18.      console.log('WebSocket连接已经关闭!')  
  19.    });  
  20.   },"code" class="javascript">    //手动关闭连接  
  21.   setclose:function(e){  
  22.     console.log('WebSocket连接正在关闭!')  
  23.     wx.closeSocket();  
  24.   
  25.   }  
  26.   
  27.     
  28. })  

  29.   
  30.   
  31.   
  32.   
  33.                       
原文地址http://www.bieryun.com/671.html

你可能感兴趣的:(微信小程序+java后端整合笔记)