微信小程序结合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如果代码中存在问题请指出！！