小菜鸟学习SPRING BOOT -- websocket配置

最新推荐文章于 2021-06-10 16:55:01 发布

weixin_30885111

最新推荐文章于 2021-06-10 16:55:01 发布

阅读量103

点赞数

文章标签：网络 java json

原文链接：http://www.cnblogs.com/xingzhuipingye/p/6906642.html

版权

　　菜鸟新来，大神勿喷，些许醍醐，感激涕零。因为我总是装幽默，是因为我想让自己快乐。

　 websocket为浏览器为服务器提供了双工异步通信的功能，即浏览器可以向服务器发送消息，服务器也可以向浏览器发送消息。websocket需要浏览器的支持(ie10+、chrome 13+、firefox 6+)。

　　websocket是通过一个socket来实现双工异步通信功能，但是直接使用websocket会比较麻烦，我们使用它的子协议stomp，它是一个更高级的协议，stomp使用一个基于帧的格式来定义消息，与http的request和response类似。

　　实战（新建spring boot项目，选择thymeleaf和websocket）

　　1、广播式

　　广播式即服务端有消息时，会将消息发给所有连接了当前endpoint的浏览器。

　　① 配置websocket，需要再配置类上使用@EnableWebSocketMessageBroker开启websocket，并通过AbstractWebSocketMessageBrokerConfigurer类。

package com.example.demo;

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

/**
 * Created by xingzhuipingye on 2017/5/25.
 */

@Configuration
//开启stomp协议来传输基于代理message broker的消息
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
    @Override
    //注册stomp协议节点 endpoint
    public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
        //注册一个endpoint 并指定是哟个socketjs
        stompEndpointRegistry.addEndpoint("/endpointWisely").withSockJS();
    }

    @Override
    //配置消息代理
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        //广播式配置一个topic的消息代理
        registry.enableSimpleBroker("/topic");
    }
}

　　② 浏览器向服务器发送的类

package com.example.demo;

/**
 * Created by xingzhuipingye on 2017/5/25.
 */
//浏览器向服务器发送消息用此类接受
public class WiselyMessage {
    private String name;

    public String getName() {
        return name;
    }
}

　　③ 服务器向浏览器发送此类的消息

package com.example.demo;

/**
 * Created by xingzhuipingye on 2017/5/25.
 */
public class WiselyResponse {
    private String responseMessage;

    public WiselyResponse(String responseMessage) {
        this.responseMessage = responseMessage;
    }

    public String getResponseMessage() {
        return responseMessage;
    }
}

　　④ 控制器

package com.example.demo;

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

/**
 * Created by xingzhuipingye on 2017/5/25.
 */
@Controller
public class WsController {
    //当浏览器向服务器发送请求的时候通过@MessageMapping 映射/welcome 这个地址 类似 RequestMapping
    @MessageMapping("/welcome")
    //当服务器有消息的时候，会对订阅了@SendTo中的路径浏览器发送消息
    @SendTo("/topic/getResponse")
    public WiselyResponse say(WiselyMessage wiselyMessage) throws InterruptedException {
        Thread.sleep(3000);
        return new WiselyResponse("Welcome," + wiselyMessage.getName());
    }
}

　　⑤ 页面

<!DOCTYPE html>
<html lang="cn" xml:th="http://www.thymeleaf.org" xmlns:link="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <script src="http://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body οnlοad="disconnect()">

    <div>
        <button id="connect" οnclick="connect()">连接</button>
        <button id="disconnect" disabled="disabled" οnclick="disconnect()">断开连接</button>

    </div>

    <div id="conversationDiv">
        <label>输入你的名字</label>
        <input type="text" id="name"/>
        <button id="sendName" οnclick="sendName()">发送</button>
        <p id="response"></p>
    </div>

</body>
<script>
    var stompClient = null;
    function  setConnected(connected) {
        document.getElementById("connect").disabled = connected;
        document.getElementById('disconnect').disabled = !connected;
        document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
        $('#response').html();
    }

    function  connect() {
        var socket = new SockJS('/endpointWisely');
        stompClient = Stomp.over(socket);
        stompClient.connect({},function (frame) {
            setConnected(true);
            console.log('connected'+ frame);
            stompClient.subscribe('/topic/getResponse',function (response) {
                showResponse(JSON.parse(response.body).responseMessage);
            });
        });
    }

    function disconnect() {
        if(stompClient!=null){
            stompClient.disconnect();
        }
        setConnected(false);
        console.log('disconnected')
    }


    function  sendName() {
        var name = $('#name').val();
        stompClient.send('/welcome',{},JSON.stringify({'name':name}));
    }
    function  showResponse(message) {
        var response = $('#response');
        response.html(message);
    }

</script>
</html>

　　打开三个浏览器分别输入名字测试

当一个浏览器发送一个消息到服务器端的时候，其他浏览器也能收到从服务器端发送来的消息。

点对点后续补充。。。

转载于:https://www.cnblogs.com/xingzhuipingye/p/6906642.html

weixin_30885111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小菜鸟学习SPRING BOOT -- websocket配置

　　菜鸟新来，大神勿喷，些许醍醐，感激涕零。因为我总是装幽默，是因为我想让自己快乐。　 websocket为浏览器为服务器提供了双工异步通信的功能，即浏览器可以向服务器发送消息，服务器也可以向浏览器发送消息。websocket需要浏览器的支持(ie10+、chrome 13+、firefox 6+)。　　websocket是通过一个socket来实现双工异步通信功能，但是直接使用we...
复制链接

扫一扫