转载链接:
对于初学者微信小程序,总是不知道小程序如何跟后台代码保存数据库整合,这篇将解答。
用到的工具和技术.
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. this); //加入set中
32. //在线数加1
33. "有新连接加入!当前在线人数为" + getOnlineCount());
34. }
35.
36. /**
37. * 连接关闭调用的方法
38. */
39. @OnClose
40. public void onClose(){
41. this); //从set中删除
42. //在线数减1
43. "有一连接关闭!当前在线人数为" + getOnlineCount());
44. }
45.
46. /**
47. * 收到客户端消息后调用的方法
48. * @param message 客户端发送过来的消息
49. * @param session 可选的参数
50. */
51. @OnMessage
52. public void onMessage(String message, Session session) {
53. "来自客户端的消息:" + 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. "发生错误");
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
- 微信小程序客户端:
[javascript] view plain copy
[javascript] view plain copy
1. var app = getApp()
2. Page({
3. function(){
4.
5. wx.connectSocket({
6. "ws://localhost:8080/TestYMG/websocket",
7. })
8. function() {
9. 'WebSocket连接已经打开!')
10. wx.sendSocketMessage({
11. 'HELLO,WORLD'+Math.random()*0XFFFFFF.toString()
12. })
13. });
14. function(data) {
15. console.log(data);
16. });
[javascript]
view plain
copy
1. //监听是否关闭
2. function() {
3. 'WebSocket连接已经关闭!')
4. });
5. },
[javascript] view plain copy
1. //手动关闭连接
2. setclose:function(e){
3. 'WebSocket连接正在关闭!')
4. wx.closeSocket();
5.
6. }