基于Web Socket的远程控制

基于 WebSocket 的远程控制

• 多屏互动事实上是一个比较宽泛的概念，通俗来讲就是用户在不同的终端上通过有线、无线的连接方式进行通信，可进行多媒体（音频，视频，图片）内容的传输，解析，展示，控制等一系列操作。而随着WebSocket协议的诞生，不同端之间网页互连也变得流行起来，这种基于WebSocket协议实现多屏互动在运营活动上的使用也使得运营页面的形式也变得更加多样和有趣。
• WebSocket接收到新数据实时更新表格。
• WebSocket实现扫码登录。
• WebSocket实现图片直播。
• WebSocket实现实时聊天。
• WebSocket实现数据库更新时前端页面刷新。

手机app控制会议室屏幕显示切换

• 手机app、多台电脑浏览器与服务器之间通过Web Socket网络协议建立持久性连接，并进行双向数据传输(addEndPoint withSockJs)
• 多台电脑浏览器与服务器成功建立连接后，订阅服务端发送过来的消息(subscribe)
• 手机app发送消息(sendTo)
• 服务器进行广播，返回消息给订阅消息的多台电脑浏览器(broker)
• 多台电脑浏览器根据消息进行页面切换。

1. 建立持久性连接
   
2. 消息广播
   

Spring Boot 整合Web Socket

1. 导入Maven依赖

        <!-- WebSocket -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

2. 配置Web Socket

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

/**
 * @EnableWebSocketMessageBroker 注解开启WebSocket消息代理
 */
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        // 设置消息代理的前缀，即如果消息的前缀是“/topic”，就会将消息转发给消息代理（broker），再由消息代理将消息广播给当前连接的客户端
        // 新增前缀"/queue"方便对群发消息和点对点消息进行管理
        registry.enableSimpleBroker("/topic", "queue");
        // 配置一个或多个前缀，通过这些前缀过滤出需要被注解处理的消息
        registry.setApplicationDestinationPrefixes("/app");
    }
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        /// 定义一个前缀为/chat的endPoint，并开启sockjs支持，sockjs可以解决浏览器对WebSocket的兼容性问题
        registry.addEndpoint("/chat").withSockJS();
    }
}

3. 前端Js建立连接，发送请求

var stompClient = null;
/**
 * connect方法表示建立一个WebSocket连接
 */
function connect() {
    // 使用SockJS建立连接
    var socket = new SockJS('/chat');
    // 创建STOMP实例发起连接请求
    stompClient = Stomp.over(socket);
    // 连接成功回调方法
    stompClient.connect({}, function (frame) {
        setConnected(true);
        // 订阅服务端发送回来的消息
        stompClient.subscribe('/topic/greetings', function (greeting) {
        	doSomething();
        });
    });
}
function disconnect() {
    if (stompClient !== null) {
        stompClient.disconnect(false);
    }
}
function send() {
    stompClient.send("/app/hello", {},
        JSON.stringify({}));
}

4. 后台接收请求，广播消息

import org.sang.entity.Message;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;

@Controller
public class GreetingController {
    /**
     * @MessageMapping("/hello")根据WebSocketConfig中的配置，该注解的方法将用来接收“/app/hello”路径发送来的消息
     * @SendTo("/topic/greetings")在消息处理完成后将消息转发到@SendTo定义的路径上，根据配置，@SendTo路径是一个前缀为
     * “/topic”的路径，因此该消息将被交给消息代理broker，再由broker进行广播
     * @param message
     * @return
     * @throws Exception
     */
    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Message greeting(Message message) throws Exception {
        return message;
    }
}