微信小程序结合SpringBoot实现WebSocket长链接

最近在做有关前后端的项目，前端主要是用Vue框架和微信小程序的原生框架

后端主要是采用Flask或SpringBoot

引入

我们知道页面的数据会在页面加载的时候触发created,mounted,onload等方法去后端获取数据，那么现在有一个需求，我们要做一个聊天软件，页面不刷新我们就拿不到我们想要的数据，怎么才能实时通讯呢？

还有一种需求，一个订单系统，客户发起订单后，商家难倒要一直刷新页面才能实时查看有没有新的订单吗

添加好友的模块

一些运动软件实时反馈步数等等，如果是基于前后端的web开发，那么我们可以使用WebSocket来实现前面所说的需求

WebSocket

它和Http一样是一个网络请求的协议，与Http不一样的是WebSocket是一个持久化通信协议，

传统的Http协议：发送请求获取响应（request-response）后来加入了keep-alive即在一次http链接中可以发送多次请求获取多次响应，

很明显http的协议的响应都是被动的。

WebSocket可以实现主动向前端传递消息

具体内容可以查看这篇博客：https://blog.csdn.net/frank_good/article/details/50856585

Http：
客户端：有消息吗
服务器：没有
客户端：有消息吗
服务器：没有
客户端：有消息吗
服务器：有，消息是xxxxx

websocket：
客户端：有消息和我说
服务器：新消息：xxxx
服务器：新消息：xxxx
服务器：新消息：xxxx

微信小程序部分实现

小程序内置了websocket的api，我们直接调用即可

websocket可以放在全局，也可以放在单独的某个页面，具体看需求，我实现的是单独一个页面的

js部分

// pages/websocket/websocket.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    inputStr: '',//输入字符串
    getStr:'',//后端获取的字符串
    socketStatus: 'closed', //记录websocket连接状态
    SocketTask:null,//socket链接后的对象，可以进行关闭发消息收消息等
    lockReconnect: false,//重连锁，防止重复连接
    wsCreateHandler: null,//重连时间句柄
    timeoutObj:null,//心跳检测时间句柄
    serverTimeoutObj:null,//心跳检测服务器响应时间句柄
  },
  //接收服务器端传送过来的数据,用于页面显示
  extraLine: [],
  //向extraLine添加一条数据
  add() {
    this.extraLine.push(this.getStr)//从服务器获取到的数据
    this.setData({
      text: this.extraLine.join('\n'),
    })
    setTimeout(() => {
      this.setData({
        scrollTop: 99999
      })
    }, 0)
  },

  /**
   * 生命周期函数--页面加载时触发
   */
  onLoad: function (options) {
    let that = this
    if (that.data.socketStatus === 'closed') {
      that.openSocket();
    }
  },
  openSocket() {
    try {
      // 连接后台服务器
      this.SocketTask = wx.connectSocket({
        url: "ws://xxxxxxxxxxxx",//你的后端地址
      })
    } catch (e) {
      // console.log(e)
      // 服务器重连
      this.ReConnect()
    }
    //连接成功后的操作
    //可以处理一些在线和非在线的情况，比如已经连接可以设置该用户头像高亮显示等等
    this.SocketTask.onOpen(() => {
      console.log('WebSocket 已连接')
      this.startHeartCheck()
      this.socketStatus = 'connected';
    })
    //断开后台服务器的操作
    this.SocketTask.onClose(() => {
      console.log('WebSocket 已断开')
      this.socketStatus = 'closed'
      this.ReConnect()
    })
    //报错时执行
    this.SocketTask.onError(error => {
      this.socketStatus = 'closed'
      this.ReConnect()
    })
    // 监听服务器推送的消息
    this.SocketTask.onMessage(message => {
      console.log(message)
      this.startHeartCheck()
      this.getStr = message.data
      let jsonObj = JSON.parse(this.getStr)
      this.getStr = jsonObj.message
      let res = jsonObj.type
      if (res === "pong")
        return
      this.add()
    })
  },
     
  // 关闭websocket服务
  closeSocket() {
    if (this.socketStatus === 'connected') {
      this.SocketTask.close({
        success: () => {
          this.socketStatus = 'closed'
        }
      })
    }
  },
     
  //发送消息函数
  sendMessage() {
    if (this.socketStatus === 'connected') {
      //群发，没有指定发送对象
      /*
      this.SocketTask.send({
        data: this.data.inputStr  
      })
      */
      //点对点发送：一般会给后端传送json数据，包括接收者的id
      let jsonObj = {formUserId:"A",toUserId:"B",message:this.inputStr}
      let jsonStr = JSON.stringify(jsonObj)
      this.SocketTask.send({
        data: jsonStr,
      })
    }
  },
  //监听用户输入
  InputStr: function(e) {
    this.inputStr = e.detail.value
  },
  //向服务器发送数据
  btnFun:function(){
    this.sendMessage()
  },

  //重连方法
  ReConnect(){
    //如果锁被锁住就直接返回
    if (this.lockReconnect)
      return
    console.log("重新连接...")
    this.lockReconnect = true
    //没有连接上会一直重连，为了防止请求次数过多一般设置等待时间
    this.wsCreateHandler && clearTimeout(this.wsCreateHandler)
    this.wsCreateHandler = setTimeout(()=>{
      this.openSocket()
      this.lockReconnect = false
    },2000)
  },

  // 心跳检测部分:网络中断等问题系统无法捕获，需要用心跳检测实现重连
  // 重启心跳检测
  resetHeartCheck(){
    clearTimeout(this.timeoutObj)
    clearTimeout(this.serverTimeoutObj)
    this.startHeartCheck()
  },
  //开启心跳检测定时器
  startHeartCheck(){
    this.timeoutObj && clearTimeout(this.timeoutObj)
    this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj)
    this.timeoutObj = setTimeout(()=>{
      console.log("发送ping到服务器")
      try {
        this.SocketTask.send({
          data: "ping"
        })
      } catch(e) {
        console.log("发送ping失败")
      }
      //内嵌计时器，防止刚连上后立刻重连
      this.serverTimeoutObj = setTimeout(()=>{
        //没有收到后台的数据关闭连接后重连
        // this.closeSocket()
        this.ReConnect()
      },15000)
    },15000)
  }
})

页面部分

<!--pages/websocket/websocket.wxml-->
<text>输入文字</text>
<input class="weui-input" auto-focus placeholder="文本输入框" bindinput="InputStr"/>
<button bindtap="btnFun">确定输入</button>
<view scroll-y="true" scroll-top="{{scrollTop}}">
  <text>{{text}}</text>
</view>

后端SpringBoot实现

WebSocketConfig.java

//将socket服务注入spring
package xihema.websocket.car.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

WebSocketEndPoint.java

//实现websocket的主要方法，在这里接收消息，发送消息
package xihema.websocket.car.websocket;


import com.alibaba.fastjson.JSON;
import org.springframework.stereotype.Component;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

//对外公布的一个后端站点
//ws://localhost:8080/websocket/用户id
@ServerEndpoint(value = "/websocket/{userId}")
@Component
public class WebSocketEndPoint {
    //与某个客户端的连接会话，需要他来给客户端发送数据
    private Session session;

    //连接建立成功调用的方法
    @OnOpen
    public void onOpen(Session session, @PathParam("userId") String userId) {
        //把会话加入连接池中
        //userId通过用户传入，session是系统自动产生
        SessionPool.sessions.put(userId, session);

        //TODO 可以添加日志操作
    }

    //关闭会话的时候
    @OnClose
    public void onClose(Session session) throws IOException {
        SessionPool.close(session.getId());
        session.close();
    }

    //接收客户端的消息后调用的方法，在这里可以进行各种业务逻辑的操作
    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println(message);
        //心跳检测
        if (message.equalsIgnoreCase("ping")) {
            try {
                Map<String, Object> params = new HashMap<>();
                params.put("type", "pong");
                session.getBasicRemote().sendText(JSON.toJSONString(params));
            } catch (Exception e) {
                e.printStackTrace();
            }
            return;
        }
        //其他情况
        //将Json字符串转为键值对
//        Map<String, Object> params = JSON.parseObject(message, new HashMap<String, Object>().getClass());
//        SessionPool.sendMessage(params);
        
        //这里的业务逻辑仅仅是把收到的消息返回给前端
        SessionPool.sendMessage(message);
    }
    //心跳检测：用于服务器断开后进行感知，感知是否存活
}

SessionPool.java

//session池，用于多用户的会话保持
package xihema.websocket.car.websocket;

import javax.websocket.Session;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

public class SessionPool {
    //key-value : userId - 会话（系统创建）
    public static Map<String, Session> sessions = new ConcurrentHashMap<>();//避免多线程问题

    public static void close(String sessionId) {
        //sessionId是在session中添加了一个标识，准确定位某条session
        for (String userId : SessionPool.sessions.keySet()) {
            Session session = SessionPool.sessions.get(userId);
            if (session.getId().equals(sessionId)) {
                sessions.remove(userId);
                break;
            }
        }
    }

    public static void sendMessage(String userId, String message) {
        sessions.get(userId).getAsyncRemote().sendText(message);
    }


    //消息的群发，业务逻辑的群发
    public static void sendMessage(String message) {
        for (String sessionId : SessionPool.sessions.keySet()) {
            SessionPool.sessions.get(sessionId).getAsyncRemote().sendText(message);
        }
    }

    //点对点的消息推送
    public static void sendMessage(Map<String, Object> params) {
        String userId = params.get("formUserId").toString();
        String toUserId = params.get("toUserId").toString();
        String msg = params.get("message").toString();
        //获取用户session
        Session session = sessions.get(toUserId);

        //session不为空的情况下进行点对点推送
        if (session != null) {
            session.getAsyncRemote().sendText(msg);
        }
    }
}

代码部分功能分析

重连机制

当当前页面的websocket与后端链接断开时，或报错或链接的时候遇到问题，没有连接成功，如果没有重连机制，那么客户端和服务器的交互到此结束，但是事实上并非如此，如果服务器又恢复正常了，能连接上了呢，前端只能刷新页面才能连上，重连机制就是在服务器断开后不停进行重连的操作。

呈现的效果：

• 连接失败时进行重连

• 连接成功时

心跳机制

当客户端和浏览器之间的网络连接中断，客户端和服务器都无法发现报错，但是此时客户端和服务器已经不能通信，添加心跳机制能很好的避免这个问题，和重连机制类似，每隔几秒钟向服务器发送一次消息，服务器能给出答复说明他们之间连接没问题，否则进行重连

心跳重连一般添加到链接后和发消息后：

显示查看心跳机制：

写在最后

第一次接触websocket如果代码中存在问题请指出！！