前期准备

项目地址 https://github.com/weiangongsi/websocket  已经实现了 双人对话 和 群聊

申请一个ssl证书免费的就可以

阿里云：https://common-buy.aliyun.com/?commodityCode=cas#/buy

然后下载证书

我们需要这个 .key 文件，把该文件放在spring boot项目resources目录下，配置文件中添加

application.yml

1.  
   server:
2.  
   port: 443
3.  
   servlet:
4.  
   context-path: /
5.  
   ssl:
6.  
   key-store: classpath:21427867.pfx
7.  
   key-store-password: 21427867
8.  
   key-store-type: PKCS12

登陆微信公众平台 小程序后台 设置-》开发设置-》服务器域名

本机调试，我们还需要做一个内网映射，花生壳，路由器端口映射，dmz主机都可以。

dmz主机可以利用阿里云的域名解析接口，自己写一个服务，实时更新A记录的值为我们本机的公网ip，这就实现了动态解析的功能。

没有以上的就 点击 开发者工具-》详细-》不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书

开始

一、服务端

可以参考spring官网案例创建websocket服务端

网址：https://spring.io/guides/gs/messaging-stomp-websocket/

pom.xml 加上websocket

1.  
   <dependency>
2.  
   <groupId>org.springframework.boot</groupId>
3.  
   <artifactId>spring-boot-starter-websocket</artifactId>
4.  
   </dependency>

WebSocketConfig.java

1.  
   package com.example.websocket.config;
2.  
    
3.  
   import org.springframework.context.annotation.Configuration;
4.  
   import org.springframework.messaging.simp.config.MessageBrokerRegistry;
5.  
   import org.springframework.scheduling.concurrent.DefaultManagedTaskScheduler;
6.  
   import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
7.  
   import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
8.  
   import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
9.  
    
10.  
    /**
11.  
    * websocket 配置
12.  
    * https://docs.spring.io/spring-security/site/docs/4.0.x/reference/html/websocket.html
13.  
    * https://docs.spring.io/spring/docs/current/spring-framework-reference/web.html
14.  
    * https://stackoverflow.com/questions/48903044/how-to-secure-websocket-application-spring-boot-stomp
15.  
    *
16.  
    * @author lhy
17.  
    */
18.  
    @Configuration
19.  
    @EnableWebSocketMessageBroker
20.  
    public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
21.  
     
22.  
    /**
23.  
    * 配置了一个简单的消息代理，如果不重载，默认情况下回自动配置一个简单的内存消息代理，用来处理以"/topic"为前缀的消息。这里重载configureMessageBroker()方法，
24.  
    * 消息代理将会处理前缀为"/topic"和"/queue"的消息。
25.  
    */
26.  
    @Override
27.  
    public void configureMessageBroker(MessageBrokerRegistry config) {
28.  
    // 这句话表示在topic和user这两个域上可以向客户端发消息。
29.  
    config.enableSimpleBroker("/topic", "/user")
30.  
    .setHeartbeatValue(new long[]{10000L, 10000L})
31.  
    .setTaskScheduler(new DefaultManagedTaskScheduler());
32.  
    // 这句话表示客户单向服务器端发送时的主题上面需要加"/app"作为前缀。
33.  
    config.setApplicationDestinationPrefixes("/app");
34.  
    // 这句话表示给指定用户发送一对一的主题前缀是"/user"。
35.  
    config.setUserDestinationPrefix("/user");
36.  
    }
37.  
     
38.  
    /**
39.  
    * 将"/gs-guide-websocket"路径注册为STOMP端点，这个路径与发送和接收消息的目的路径有所不同，这是一个端点，客户端在订阅或发布消息到目的地址前，要连接该端点，
40.  
    * 即用户发送请求url="/gs-guide-websocket"与STOMP server进行连接。之后再转发到订阅url；
41.  
    * PS：端点的作用——客户端在订阅或发布消息到目的地址前，要连接该端点。
42.  
    */
43.  
    @Override
44.  
    public void registerStompEndpoints(StompEndpointRegistry registry) {
45.  
    /*
46.  
    * 在网页上可以通过"/gs-guide-websocket"来和服务器的WebSocket连接
47.  
    *这个和客户端创建连接时的url有关，其中setAllowedOrigins()方法表示允许连接的域名，withSockJS()方法表示支持以SockJS方式连接服务器。
48.  
    */
49.  
    registry.addEndpoint("/gs-guide-websocket").addInterceptors(new HttpHandshakeInterceptor()).setAllowedOrigins("*");
50.  
    }
51.  
     
52.  
    }

HttpHandshakeInterceptor.java

1.  
   package com.example.websocket.config;
2.  
    
3.  
   import org.springframework.http.server.ServerHttpRequest;
4.  
   import org.springframework.http.server.ServerHttpResponse;
5.  
   import org.springframework.web.socket.WebSocketHandler;
6.  
   import org.springframework.web.socket.server.HandshakeInterceptor;
7.  
    
8.  
   import java.util.Map;
9.  
    
10.  
    /**
11.  
    * websocket 握手
12.  
    *
13.  
    * @author lihy
14.  
    * @version 2018/6/15
15.  
    */
16.  
    public class HttpHandshakeInterceptor implements HandshakeInterceptor {
17.  
     
18.  
    @Override
19.  
    public boolean beforeHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Map<String, Object> attributes) throws Exception {
20.  
    return true;
21.  
    }
22.  
     
23.  
    @Override
24.  
    public void afterHandshake(ServerHttpRequest request, ServerHttpResponse response, WebSocketHandler wsHandler, Exception ex) {
25.  
     
26.  
    }
27.  
     
28.  
    }

SocketController.java

1.  
   package com.example.websocket.controller;
2.  
    
3.  
   import com.alibaba.fastjson.JSONObject;
4.  
   import org.springframework.beans.factory.annotation.Autowired;
5.  
   import org.springframework.messaging.handler.annotation.MessageMapping;
6.  
   import org.springframework.messaging.simp.SimpMessageSendingOperations;
7.  
   import org.springframework.web.bind.annotation.RequestMapping;
8.  
   import org.springframework.web.bind.annotation.RequestMethod;
9.  
   import org.springframework.web.bind.annotation.RestController;
10.  
     
11.  
    import java.time.LocalTime;
12.  
    import java.util.logging.Logger;
13.  
     
14.  
    import static java.util.logging.Logger.getLogger;
15.  
     
16.  
    /**
17.  
    * websocket Controller
18.  
    *
19.  
    * @author lhy
20.  
    */
21.  
    @RestController
22.  
    public class SocketController {
23.  
     
24.  
    private static final Logger log = getLogger(SocketController.class.getName());
25.  
     
26.  
    @Autowired
27.  
    SimpMessageSendingOperations simpMessageSendingOperations;
28.  
     
29.  
    /**
30.  
    * 接收客户端发来的消息
31.  
    */
32.  
    @MessageMapping("/message")
33.  
    public void handleSubscribe(String msg) {
34.  
    msg = JSONObject.parseObject(msg).getString("msg");
35.  
    log.info("客户端发来消息：" + msg);
36.  
    // TODO: 处理收到的消息
37.  
    }
38.  
     
39.  
     
40.  
    /**
41.  
    * 测试对指定用户发送消息方法
42.  
    * 浏览器 访问https://xcx.dcssn.com/sendToUser?user=123456 前端小程序会收到信息
43.  
    * 客户端接收一对一消息的主题应该是“/user/” + 用户Id + “/message” ,这里的用户id可以是一个普通的字符串，只要每个用户端都使用自己的id并且服务端知道每个用户的id就行。
44.  
    *
45.  
    * @return 发送的消息内容
46.  
    */
47.  
    @RequestMapping(path = "/sendToUser", method = RequestMethod.GET)
48.  
    public String sendToUser(String user) {
49.  
    String payload = "指定用户" + user + "接收信息" + LocalTime.now();
50.  
    simpMessageSendingOperations.convertAndSendToUser(user, "/message", payload);
51.  
    return payload;
52.  
    }
53.  
     
54.  
    /**
55.  
    * 群发消息 订阅/topic/greetings 会收到
56.  
    * 浏览器 访问https://xcx.dcssn.com/sendToAll 前端小程序会收到信息
57.  
    *
58.  
    * @return 发送的消息内容
59.  
    */
60.  
    @RequestMapping(path = "/sendToAll", method = RequestMethod.GET)
61.  
    public String sendToUser() {
62.  
    String payload = "群发消息" + LocalTime.now();
63.  
    simpMessageSendingOperations.convertAndSend("/topic/greetings", payload);
64.  
    return payload;
65.  
    }
66.  
    }

二、小程序

引入stomp模块， 官网下载就可以了，地址：https://raw.githubusercontent.com/jmesnil/stomp-websocket/master/lib/stomp.js

js

1.  
   //index.js
2.  
   //获取应用实例
3.  
   const app = getApp()
4.  
    
5.  
   Page({
6.  
   data: {},
7.  
    
8.  
   //页面加载事件
9.  
   onLoad: function() {
10.  
    // websocket初始化
11.  
    this.initSocket();
12.  
    },
13.  
    /**
14.  
    * 初始化websocket
15.  
    * stomp文档 http://jmesnil.net/stomp-websocket/doc/
16.  
    */
17.  
    initSocket: function() {
18.  
    // socket是否连接
19.  
    var socketConnected = false;
20.  
    // 待发送的消息队列
21.  
    var messageQueue = [];
22.  
    // 是否断线重连
23.  
    var reconnect = true;
24.  
     
25.  
     
26.  
    // 发送消息
27.  
    function sendSocketMessage(msg) {
28.  
    // console.log(msg);
29.  
    // 如果socket已连接则发送消息
30.  
    if (socketConnected) {
31.  
    wx.sendSocketMessage({
32.  
    data: msg
33.  
    })
34.  
    } else {
35.  
    // socket没有连接将消息放入队列中
36.  
    messageQueue.push(msg);
37.  
    }
38.  
    }
39.  
     
40.  
    // 关闭连接
41.  
    function close() {
42.  
    if (socketConnected) {
43.  
    wx.closeSocket()
44.  
    }
45.  
    }
46.  
     
47.  
    // 符合WebSocket定义的对象
48.  
    var ws = {
49.  
    send: sendSocketMessage,
50.  
    close: close
51.  
    }
52.  
     
53.  
    // 创建一个 WebSocket 连接
54.  
    function connect() {
55.  
    wx.connectSocket({
56.  
    url: 'wss://xcx.dcssn.com/gs-guide-websocket'
57.  
    })
58.  
    }
59.  
    connect();
60.  
     
61.  
    // 监听 WebSocket 连接打开事件
62.  
    wx.onSocketOpen(function(res) {
63.  
    console.log("WebSocket 连接成功")
64.  
    socketConnected = true;
65.  
    ws.onopen();
66.  
    // 连接成功后，将队列中的消息发送出去
67.  
    let queueLength = messageQueue.length
68.  
    for (let i = 0; i < queueLength; i++) {
69.  
    const messageQueueElement = messageQueue.shift();
70.  
    wx.sendSocketMessage({
71.  
    data: messageQueueElement
72.  
    })
73.  
    }
74.  
    })
75.  
     
76.  
    // 监听 WebSocket 接受到服务器的消息事件
77.  
    wx.onSocketMessage(function(res) {
78.  
    ws.onmessage(res);
79.  
    })
80.  
     
81.  
    // 监听 WebSocket 错误事件
82.  
    wx.onSocketError(function(res) {
83.  
    console.log("WebSocket 错误事件")
84.  
    })
85.  
     
86.  
    // 监听 WebSocket 连接关闭事件
87.  
    wx.onSocketClose(function(res) {
88.  
    console.log("WebSocket 连接关闭")
89.  
    socketConnected = false;
90.  
    // 断线重连
91.  
    if (reconnect) {
92.  
    connect();
93.  
    }
94.  
    })
95.  
     
96.  
    var Stomp = require('../../utils/stomp.min.js').Stomp;
97.  
     
98.  
    /**
99.  
    * 定期发送心跳或检测服务器心跳
100.  
     * The heart-beating is using window.setInterval() to regularly send heart-beats and/or check server heart-beats.
101.  
     * 可看stomp.js的源码（195,207，489行），由于小程序没有window对象，所以我们要调用小程序的定时器api实现
102.  
     */
103.  
     Stomp.setInterval = function(interval, f) {
104.  
     return setInterval(f, interval);
105.  
     };
106.  
     // 结束定时器的循环调用
107.  
     Stomp.clearInterval = function(id) {
108.  
     return clearInterval(id);
109.  
     };
110.  
      
111.  
     var stompClient = Stomp.over(ws);
112.  
      
113.  
     let openid = "123456";
114.  
      
115.  
     stompClient.connect({}, function(callback) {
116.  
      
117.  
     // 主题订阅
118.  
     stompClient.subscribe('/topic/greetings', function(body, headers) {
119.  
     console.log('收到群发消息', body);
120.  
     });
121.  
      
122.  
     // 订阅自己的
123.  
     stompClient.subscribe('/user/' + openid + '/message', function(message, headers) {
124.  
     wx.vibrateLong()
125.  
     console.log('收到只发送给我的消息:', message);
126.  
     // 通知服务端收到消息
127.  
     message.ack();
128.  
     });
129.  
      
130.  
     // 向服务端发送消息
131.  
     stompClient.send("/app/message", {}, JSON.stringify({
132.  
     'msg': '我是客户端'
133.  
     }));
134.  
     })
135.  
      
136.  
     }
137.  
     })

项目地址 https://github.com/weiangongsi/websocket

我有一个xcx.dcssn.com的域名证书可以供群友测试使用

qq群 806893930      25个人了