服务器主动发消息给前端,服务端主动通知Web前端的一些探索--Spring boot集成WebSocket...

知识背景

随着物联网的发展促进传统行业不断转型，在设备间通信的业务场景越来越多。其中很大一部分在于移动端和设备或服务端与设备的通信，例如已成主流的共享单车。但存在一个这样小问题，当指令下发完毕之后，设备不会同步返回指令执行是否成功，而是异步通知或是服务端去主动查询设备指令是否发送成功，这样一来客户端(前端)也无法同步获取指令执行情况，只能通过服务端异步通知来接收该状态了。这也就引出了这篇博客想要探索的一项技术：如何实现服务端主动通知前端？ 其实，这样的业务场景还有很多，但这样的解决方案却不是非常成熟，方案概括过来就两个大类。1.前端定时请求轮询 2.前端和服务端保持长连接，以持续进行数据交互，这个可以包括较为成熟的WebSocket。我们可以看看张小龙在知乎问题 如何在大型 Web 应用中保持数据的同步更新？ 的回答，更加清楚的认识这个过程。

这个问题在10年前已经被解决过无数次了，最简单的例子就是网页聊天室。题主的需求稍微复杂些，需要支持的数据格式更多，然而只要定义好了通讯规范，多出来的也只是搬砖的活儿了。

整个过程可以分为5个环节：1 包装数据、2 触发通知、3 通讯传输、4 解析数据、5 渲染数据。这5个环节中有三点很关键：1 通讯通道选择、2 数据格式定义、3 渲染数据。

1 通讯通道选择：这个很多前端高手已经回答了，基本就是两种方式：轮询和长连接，这种情况通常的解决方式是长连接，Web端可以用WebSocket来解决，这也是业界普遍采用的方案，比如环信、用友有信、融云等等。通讯环节是相当耗费服务器资源的一个环节，而且开发成本偏高，建议将这些第三方的平台直接集成到自己的项目中，以降低开发的成本。

2 数据格式定义：数据格式可以定义得五花八门，不过为了前端的解析，建议外层统一数据格式，定义一个类似type的属性来标记数据属性(是IM消息、微博数据还是发货通知)，然后定义一个data属性来记录数据的内容(一般对应数据表中的一行数据)。统一数据格式后，前端解析数据的成本会大大降低。

3 渲染数据渲染数据是关系到前端架构的，比如是React、Vue还是Angular(BTW：不要用Angular，个人认为Angular在走向灭亡)。这些框架都用到了数据绑定，这已经成为业界的共识了(只需要对数据进行操作，不需要操作DOM)，这点不再论述。在此种需求场景下，数据流会是一个比较大的问题，因为可能每一条新数据都需要寻找对应的组件去传递数据，这个过程会特别恶心。所以选择单一树的数据流应该会很合适，这样只需要对一棵树的节点进行操作即可：定义好type和树节点的对应关系，然后直接定位到对应的节点对数据增删改就可以，例如Redux。

以上三点是最核心的环节，涉及到前后端的数据传输、前端数据渲染，其他的内容就比较简单了，也简单说下。

后端：包装数据、触发通知这个对后端来说就很Easy了，建一个队列池，不断的往池子里丢任务，让池子去触发通知。

前端：解析数据解析数据就是多出来的搬砖的活儿，过滤type、取data。技术难度并不大，主要点还是在于如何能低开发成本、低维护成本地达到目的，上面是一种比较综合的低成本的解决方案。

对于对实时性要求较高的业务场景，轮询显然是无法满足需求的，而长连接的缺点在于长期占了服务端的连接资源，当前端用户数量指数增长到一定数量时，服务端的分布式须另辟蹊径来处理WebSocket的连接匹配问题。它的优点也很明显，对于传输内容不大的情况下，有非常快的交互速度，因为他不是基于HTTP请求的，而是浏览器端扩展的Socket通信。

Spring boot接入WebSocket

Maven Dependencies

org.springframework.boot

spring-boot-starter-websocket

Config

@Configuration

@EnableWebSocketMessageBroker

public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

@Override

public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {

// 添加服务端点，可以理解为某一服务的唯一key值

stompEndpointRegistry.addEndpoint("/chatApp");

//当浏览器支持sockjs时执行该配置

stompEndpointRegistry.addEndpoint("/chatApp").setAllowedOrigins("*").withSockJS();

}

@Override

public void configureMessageBroker(MessageBrokerRegistry config) {

// 配置接受订阅消息地址前缀为topic的消息

config.enableSimpleBroker("/topic");

// Broker接收消息地址前缀

config.setApplicationDestinationPrefixes("/app");

}

}

MessageMapping

@Autowired

private SimpMessagingTemplate template;

//接收客户端"/app/chat"的消息，并发送给所有订阅了"/topic/messages"的用户

@MessageMapping("/chat")

@SendTo("/topic/messages")

public OutputMessage receiveAndSend(InputMessage inputMessage) throws Exception {

System.out.println("get message (" + inputMessage.getText() + ") from client!");

System.out.println("send messages to all subscribers!");

String time = new SimpleDateFormat("HH:mm").format(new Date());

return new OutputMessage(inputMessage.getFrom(), inputMessage.getText(), time);

}

//或者直接从服务端发送消息给指定客户端

@MessageMapping("/chat_user")

public void sendToSpecifiedUser(@Payload InputMessage inputMessage, SimpMessageHeaderAccessor headerAccessor) throws Exception {

System.out.println("get message from client (" + inputMessage.getFrom() + ")");

System.out.println("send messages to the specified subscriber!");

String time = new SimpleDateFormat("HH:mm").format(new Date());

this.template.convertAndSend("/topic/" + inputMessage.getFrom(), new OutputMessage(inputMessage.getFrom(), inputMessage.getText(), time));

}

clients

Chat WebSocket

var apiUrlPre = "http://10.200.0.126:9041/discovery";

var stompClient = null;

function setConnected(connected) {

document.getElementById('connect').disabled = connected;

document.getElementById('disconnect').disabled = !connected;

document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';

document.getElementById('response').innerHTML = '';

}

function connect() {

var socket = new SockJS('http://localhost:9041/discovery/chatApp');

var from = document.getElementById('from').value;

stompClient = Stomp.over(socket);

stompClient.connect({}, function(frame) {

setConnected(true);

console.log('Connected: ' + frame);

//stompClient.subscribe('/topic/' + from, function(messageOutput) {

stompClient.subscribe('/topic/messages', function(messageOutput) {

// alert(messageOutput.body);

showMessageOutput(JSON.parse(messageOutput.body));

});

});

}

function disconnect() {

if(stompClient != null) {

stompClient.disconnect();

}

setConnected(false);

console.log("Disconnected");

}

function sendMessage() {

var from = document.getElementById('from').value;

var text = document.getElementById('text').value;

//stompClient.send("/app/chat_user", {},

stompClient.send("/app/chat", {},

JSON.stringify({

'from': from,

'text': text

})

);

}

function showMessageOutput(messageOutput) {

var response = document.getElementById('response');

var p = document.createElement('p');

p.style.wordWrap = 'break-word';

p.appendChild(document.createTextNode(messageOutput.from + ": " +

messageOutput.text + " (" + messageOutput.time + ")"));

response.appendChild(p);

}

Connect

Disconnect

Send

结果

send to all subscribers

send to the specified subscriber

总结

这是spring-boot接入WebSocket最简单的方法了,很直观的表现了socket在浏览器段通信的便利，但根据不同的业务场景，对该技术的使用还需要斟酌，例如如何使WebSocket在分布式服务端保持服务，如何在连接上集群后下发消息找到长连接的服务端机器。我也在为这个问题苦苦思考，思路虽有，实践起来却举步维艰，特别是网上谈到比较多的将连接序列化到缓存中，统一管理读取分配，分享几个好思路，也希望自己能给找到较好的方案再分享一篇博客。

来自Push notifications with websockets in a distributed Node.js app

Configure Nginx to send websocket requests from each browser to all the server in the cluster. I could not figure out how to do it. Load balancing does not support broadcasting.

Store websocket connections in the databse, so that all servers had access to it. I am not sure how to serialize the websocket connection object to store it in MongoDB.

Set up a communication mechanism among the servers in the cluster (some kind message bus) and whenever event happens, have all the servers notify the websocket clients they are tracking. This somewhat complicates the system and requires the nodes to know the addresses of each other. Which package is most suitable for such a solution?

再分享几个讨论：

springsession如何对spring的WebSocketSession进行分布式配置？

websocket多台服务器之间怎么共享websocketSession?

参考