微信小程序与java实现websocket长连接

什么是WebSocket长连接

WebSocket是一种在单个TCP连接上进行全双工通信的协议。它通过在握手阶段将HTTP升级协议为WebSocket协议来实现。在握手成功后，客户端和服务器端可以互相推送消息，而不需要不断的发起HTTP请求和响应。

WebSocket长连接通常用于需要实时推送数据或实时聊天的场景。

Java如何实现WebSocket长连接

Java的实现通常通过实现WebSocket协议进行实现。下面提供一个基础的示例代码：

@ServerEndpoint("/websocket")
public class WebSocketServer {

    private static Set<Session> sessions = Collections.synchronizedSet(new HashSet<Session>());

    @OnOpen
    public void onOpen(Session session) {
        System.out.println("新连接：" + session.getId());
        sessions.add(session);
    }

    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println("接收到消息：" + message);
        // 进行业务处理...
        // 可以通过session.getBasicRemote().sendText()方法将处理结果返回给客户端
    }

    @OnClose
    public void onClose(Session session) {
        System.out.println("连接关闭：" + session.getId());
        sessions.remove(session);
    }

    @OnError
    public void onError(Throwable throwable) {
        throwable.printStackTrace();
    }
}

上面代码中，@ServerEndpoint("/websocket")注解用于标识当前类是一个WebSocket的处理类。@OnOpen、@OnMessage、@OnClose、@OnError注解分别对应WebSocket的四个事件，在相应的事件发生时会被触发执行相应的方法。

在@OnMessage方法中可以编写业务处理代码，并通过session.getBasicRemote().sendText()方法将处理结果返回给客户端。

微信小程序如何接入WebSocket长连接

通过微信小程序提供的 wx.connectSocket() 方法可以创建WebSocket连接。

下面提供一个示例代码：

wx.connectSocket({
  url: 'wss://example.com/websocket',
  success: function() {
    console.log('连接成功');
  }
});

wx.onSocketOpen(function() {
  console.log('WebSocket连接已打开');
});

wx.onSocketMessage(function (res) {
  console.log('收到消息：', res.data);
});

wx.onSocketError(function (res) {
  console.log('WebSocket连接错误');
});

wx.onSocketClose(function () {
  console.log('WebSocket已关闭');
});

在wx.connectSocket()方法中，url参数指向WebSocket服务器的地址。在wx.onSocketOpen()方法中可以编写连接成功后的处理逻辑，在wx.onSocketMessage()方法中可以编写收到消息后的处理逻辑。

示例说明

示例1：聊天室实现

我们可以通过Java WebSocket长连接和微信小程序接入实现一个简单的聊天室。

在Java端，我们需要实现一个类似于示例的WebSocket类，用于处理WebSocket的连接、收发消息和连接关闭事件，同时，我们还需要在收到消息时进行逻辑处理，并将消息推送给所有连接到服务器的WebSocket客户端。示例如下：

@ServerEndpoint("/websocket/chatroom")
public class ChatRoomWebSocketServer {

    private static Set<Session> sessions = Collections.synchronizedSet(new HashSet<Session>());

    @OnOpen
    public void onOpen(Session session) {
        System.out.println("新连接：" + session.getId());
        sessions.add(session);
    }

    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println("接收到消息：" + message);
        for (Session s : sessions) {
            try {
                s.getBasicRemote().sendText(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    @OnClose
    public void onClose(Session session) {
        System.out.println("连接关闭：" + session.getId());
        sessions.remove(session);
    }

    @OnError
    public void onError(Throwable throwable) {
        throwable.printStackTrace();
    }
}

在微信小程序端，我们需要编写两个页面，chatroom/index页面用于显示聊天室消息和发送消息，index/index页面用于获取用户信息和通信密钥。

chatroom/index页面中，我们需要使用wx.connectSocket()方法连接到Java WebSocket长连接聊天室服务，同时，在成功连接之后我们需要通过wx.sendSocketMessage()方法向服务端发送类似下面的消息：

{
  "type": "enter",
  "content": "加入聊天室"
}

在Java端，我们可以通过解析收到的消息类型和内容，进行相应的逻辑处理。同时我们也需要将收到的消息推送给所有客户端，例如下面代码：

在chatroom/index页面，我们需要监听wx.onSocketMessage()方法，在收到消息之后，将消息渲染到聊天室页面中，例如下面代码：

wx.onSocketMessage(function (res) {
  var message = JSON.parse(res.data);

  switch(message.type) {
    case 'enter':
      // 新用户加入
      break;
    case 'normal':
      // 收到消息
      break;
    case 'leave':
      // 用户离开
      break;
  }
});

示例2：实时推送数据

我们可以通过Java WebSocket长连接和微信小程序接入实现一个实时推送数据的示例应用。

在Java端，我们需要实现一个类似于示例的WebSocket类，用于处理WebSocket的连接、收发消息和连接关闭事件，同时，我们还需要在收到消息时进行逻辑处理，并将消息推送给所有连接到服务器的WebSocket客户端。示例如下：

@ServerEndpoint("/websocket/realtime")
public class RealTimeWebSocketServer {

    private static Set<Session> sessions = Collections.synchronizedSet(new HashSet<Session>());

    @OnOpen
    public void onOpen(Session session) {
        System.out.println("新连接：" + session.getId());
        sessions.add(session);
    }

    @OnMessage
    public void onMessage(String message, Session session) {
        // 接收数据并进行业务处理（省略代码）
        // 通过session.getBasicRemote().sendText()方法将处理结果返回给客户端
    }

    @OnClose
    public void onClose(Session session) {
        System.out.println("连接关闭：" + session.getId());
        sessions.remove(session);
    }

    @OnError
    public void onError(Throwable throwable) {
        throwable.printStackTrace();
    }

    /**
     * 通过一个定时器向所有连接的客户端推送数据
     */
    public void pushData() {
        new Timer().schedule(new TimerTask() {
            @Override
            public void run() {
                for (Session session : sessions) {
                    try {
                        session.getBasicRemote().sendText(getData());
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }
        }, 0, 1000);
    }
}

在微信小程序端，我们需要使用wx.connectSocket()方法连接到Java WebSocket长连接实时推送数据服务，在成功连接之后，我们需要根据应用的需求通过wx.sendSocketMessage()方法向服务端发送对应的消息进行请求数据，例如下面的消息：

{
  "type": "getData",
  "content": {
    "id": "001",
    "type": "realtime"
  }
}

在Java端，我们可以通过解析收到的消息类型和内容，进行相应的逻辑处理。例如，收到getData的消息之后可以返回实时的数据结果。

在微信小程序端，我们需要监听wx.onSocketMessage()方法，在收到消息之后，将数据渲染到页面中。

结语

通过Java和微信小程序的结合实现WebSocket长连接，我们可以方便地在应用中实现实时推送和在线聊天等功能，使应用更符合用户的使用习惯，也提高了用户对应用的使用体验。