2、点对点式WebSocket

悠悠 2022-05-28 09:10 184阅读 0赞

## 前言 ##

接着第一篇广播式开始介绍

点对点，也就是说是用户之间的交互。所以需要登录的，我这里使用了SpringSecrity做的简单的登录

## 1、引入 security 依赖 ##

<dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-security</artifactId>
    </dependency>

## 2、添加SpringSecurity 配置 ##

这里我添加了两个假的用户

package com.hlj.websocket.WebSocket;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
    import org.springframework.security.config.annotation.web.builders.HttpSecurity;
    import org.springframework.security.config.annotation.web.builders.WebSecurity;
    import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
    import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
    
    /** * 点对点 */
    
    
    @Configuration
    @EnableWebSecurity
    public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
        @Override
        protected void configure(HttpSecurity http) throws Exception {
            http
                    .authorizeRequests()
                    .antMatchers("/","/login","/excel").permitAll()//1根路径和/login路径不拦截
                    .anyRequest().authenticated()
                    .and()
                    .formLogin()
                    .loginPage("/login") //2登陆页面
                    .defaultSuccessUrl("/chat") //3登陆成功转向该页面
                    .permitAll()
                    .and()
                    .logout()
                    .permitAll();
        }
    
        //4 配置两个用户 wyf 和wisely 角色相同
        @Override
        protected void configure(AuthenticationManagerBuilder auth) throws Exception {
                auth
                    .inMemoryAuthentication()
                    .withUser("huangliang").password("huangliang").roles("USER")
                    .and()
                    .withUser("HealerJean").password("HealerJean").roles("USER");
        }
        //5忽略静态资源的拦截
        @Override
        public void configure(WebSecurity web) throws Exception {
            web.ignoring().antMatchers("/resources/static/**");
        }
    
    }

## 3、配置websocket配置 ##

1、注册Stomp的协议的节点，并映射指定的url

//点对点式
       registry.addEndpoint("/endpointChat").withSockJS();//1

2、配置信息代理

registry.enableSimpleBroker("/queue"); //2

package com.hlj.websocket.WebSocket;
    
    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;
    
    /** * 1 通过 @EnableWebSocketMessageBroker * 开启使用stomp协议来传输 基于代理的 message broker, * 这个时候控制器支持使用MessageMapping * */
    @Configuration
    @EnableWebSocketMessageBroker //1
    public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer { 
    
        /** * 注册Stomp的协议的节点，并映射指定的url * @param registry */
        @Override
        public void registerStompEndpoints(StompEndpointRegistry registry) {
            //点对点式
            registry.addEndpoint("/endpointChat").withSockJS();//1
        }
    
        /** * 配置信息代理 * @param registry */
        @Override
        public void configureMessageBroker(MessageBrokerRegistry registry) {
            //点对点式queue 这里的queue 为用户中间互相订阅的url前缀
            registry.enableSimpleBroker("/queue"); //2
    
    
        }
    
    }

## 4、用户交互的controler ##

package com.hlj.websocket.WebSocket;
    
    import com.hlj.websocket.WebSocket.domain.WiselyMessage;
    import com.hlj.websocket.WebSocket.domain.WiselyResponse;
    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;
    
    import java.security.Principal;
    
    /** * * Created by HealerJean on 2017/4/8. */
    @Controller
    public class WsController {
    
        /** * 点对点 */
        @Autowired
        private SimpMessagingTemplate messagingTemplate;
        @MessageMapping("/chat")
        public void handleChat(Principal principal,String msg){
            if (principal.getName().equals("zyj")){
                messagingTemplate.convertAndSendToUser("HealerJean","/queue/notifications",principal.getName()+"-send:"+msg);
    
            }else {
                messagingTemplate.convertAndSendToUser("zyj","/queue/notifications",principal.getName()+"-send:"+msg);
            }
        }
    }

## 5、登录页面 ##

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
    <meta charset="UTF-8" />
    <head>
        <title>登陆页面</title>
    </head>
    <body>
    <div th:if="${param.error}">
        无效的账号和密码
    </div>
    <div th:if="${param.logout}">
        你已注销
    </div>
    <form th:action="@{/login}" method="post">
        <div><label> 账号 : <input type="text" name="username"/> </label></div>
        <div><label> 密码: <input type="password" name="password"/> </label></div>
        <div><input type="submit" value="登陆"/></div>
    </form>
    </body>
    </html>

## 6、登录成功的聊天页面 ##

<!DOCTYPE html>
    
    <html xmlns:th="http://www.thymeleaf.org">
    <meta charset="UTF-8" />
    <head>
        <title>Home</title>
        <script th:src="@{sockjs.min.js}"></script>
        <script th:src="@{stomp.min.js}"></script>
        <script th:src="@{jquery.js}"></script>
    </head>
    <body>
    <p>
        聊天室
    </p>
    
    <form id="wiselyForm">
        <textarea rows="4" cols="60" name="text"></textarea>
        <input type="submit"/>
    </form>
    
    <script th:inline="javascript"> $('#wiselyForm').submit(function(e){ e.preventDefault(); var text = $('#wiselyForm').find('textarea[name="text"]').val(); sendSpittle(text); }); var sock = new SockJS("/endpointChat"); //1 var stomp = Stomp.over(sock); stomp.connect('guest', 'guest', function(frame) { stomp.subscribe("/user/queue/notifications", handleNotification);//2 }); function handleNotification(message) { $('#output').append("<b>Received: " + message.body + "</b><br/>") } function sendSpittle(text) { stomp.send("/chat", {}, text);//3 } $('#stop').click(function() { sock.close()}); </script>
    
    <div id="output"></div>
    </body>
    </html>

## [代码下载][Link 1] ##

如果满意，请打赏博主任意金额，感兴趣的请下方留言吧。可与博主自由讨论哦

<table> 
 <thead> 
  <tr> 
   <th align="center">支付包</th> 
   <th align="center">微信</th> 
   <th align="center">微信公众号</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center"><img src="https://raw.githubusercontent.com/HealerJean123/HealerJean123.github.io/master/assets/img/tctip/alpay.jpg" alt="支付宝" title=""></td> 
   <td align="center"><img src="https://raw.githubusercontent.com/HealerJean123/HealerJean123.github.io/master/assets/img/tctip/weixin.jpg" alt="微信" title=""></td> 
   <td align="center"><img src="https://raw.githubusercontent.com/HealerJean123/HealerJean123.github.io/master/assets/img/my/qrcode_for_gh_a23c07a2da9e_258.jpg" alt="微信公众号" title=""></td> 
  </tr> 
 </tbody> 
</table>

[Link 1]: https://gitee.com/HealerJean/CodeDownLoad/raw/master/1_2_websocket%E4%BB%A3%E7%A0%81/com-hlj-websocket.zip