IDEA——Websocket1对1｜8月更文挑战Websocket 点对点通信Websocket 点对点通信Webso

这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战

Websocket 点对点通信

配置pom文件

<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.webjars/sockjs-client -->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>sockjs-client</artifactId>
            <version>1.1.2</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.webjars/stomp-websocket -->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>stomp-websocket</artifactId>
            <version>2.3.3</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.webjars/jquery -->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.5.1</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.webjars/webjars-locator-core -->
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>webjars-locator-core</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>

WebsocketConfig 注册断点 implements WebSocketMessageBrokerConfigurer
WebsocketConfig 开启socketjs 支持

public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/chat").setAllowedOriginPatterns("http://localhost:8080").withSockJS();
    }

WebsocketConfig 前缀如果是 /topic ,就会把消息转发给消息代理

public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic","/queue");
    }

SecurityConfig写入账户密码

protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.inMemoryAuthentication()
                .withUser("admin")
                .password("{noop}admin123")
                .roles("admin")
                .and()
                .withUser("root")
                .password("{noop}123")
                .roles("admin")
                .and()
                .withUser("test")
                .password("{noop}admin123")
                .roles("admin");
    }

GreetingController

    @MessageMapping("/hello") // 消息地址
    @SendTo("/topic/greeting") // 转发广播地址，前端监听收到消息

GreetingController chat
principal 用户信息
param chat 发过来的具体消息

public void chat(Principal principal, Chat chat) {
        String name = principal.getName();
        chat.setFrom(name);
        messagingTemplate.convertAndSendToUser(chat.getTo(),"/queue/chat",chat);
    }

entity Chat

    private String to;		// 接收方
    private String from;	// 发送方
    private String content;	// 消息内容
    // 展开 getter,setter 方法即可

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/sockjs-client/sockjs.min.js"></script>
    <script src="/webjars/stomp-websocket/stomp.min.js"></script>
</head>
<body>
<div>
    <input id="username" type="text" placeholder="目标用户名">
</div>
<div>
    <input type="text" id="content">
    <button id="send" type="button">发送</button>
</div>
<div id="chat" style="border:5px solid #000"></div>

<script>
    var stompClient;
    $(function () {
        connect(); 						// 建立连接
        $('#send').click(function () {	// 点击发送
            stompClient.send('/online_chat',{},JSON.stringify({
                'to':$('#username').val(),
                'content':$('#content').val()
            }))
        })
    })
    
    function connect() {							// 建立连接
        var socketjs = new SockJS("/chat");			// 指定端点
        stompClient = Stomp.over(socketjs);			// 操作 websocket
        stompClient.connect({},function (frame) {	// 建立连接
            stompClient.subscribe('/user/queue/chat',function (greeting) {
                var msgBody = JSON.parse(greeting.body);
                $('#chat').append('<div>'+msgBody.from+' : '+ msgBody.content +'</div>')
            })
        })
    }
</script>
</body>
</html>

按部就班从容实现Websocket1对1通信！