Spring Boot2 系列教程 (十七) | 整合 WebSocket 实现聊天室

微信公众号:一个优秀的废人。如有问题,请后台留言,反正我也不会听。

前言

昨天那篇介绍了 WebSocket 实现广播,也即服务器端有消息时,将消息发送给所有连接了当前 endpoint 的浏览器。但这无法解决消息由谁发送,又由谁接收的问题。所以,今天写一篇实现一对一的聊天室。

今天这一篇建立在昨天那一篇的基础之上,为便于更好理解今天这一篇,推荐先阅读:「SpringBoot 整合WebSocket 实现广播消息 」文章来源地址https://www.yii666.com/article/332455.html网址:yii666.com<文章来源地址:https://www.yii666.com/article/332455.html

准备工作

  • Spring Boot 2.1.3 RELEASE
  • Spring Security 2.1.3 RELEASE
  • IDEA
  • JDK8

pom 依赖

因聊天室涉及到用户相关,所以在上一篇基础上引入 Spring Security 2.1.3 RELEASE 依赖

<!-- Spring Security 依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>

Spring Security 的配置

虽说涉及到 Spring Security ,但鉴于篇幅有限,这里只对这个项目相关的部分进行介绍,具体的 Spring Security 教程,后面会出。

这里的 Spring Security 配置很简单,具体就是设置登录路径、设置安全资源以及在内存中创建用户和密码,密码需要注意加密,这里使用 BCrypt 加密算法在用户登录时对密码进行加密。 代码注释很详细,不多说。

package com.nasus.websocket.config;

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;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder; @Configuration
// 开启Spring Security的功能
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter{ @Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
// 设置 SpringSecurity 对 / 和 "/login" 路径不拦截
.mvcMatchers("/","/login").permitAll()
.anyRequest().authenticated()
.and()
.formLogin()
// 设置 Spring Security 的登录页面访问路径为/login
.loginPage("/login")
// 登录成功后转向 /chat 路径
.defaultSuccessUrl("/chat")
.permitAll()
.and()
.logout()
.permitAll();
} @Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
auth.inMemoryAuthentication()
// 在内存中分配两个用户 nasus 和 chenzy ,用户名和密码一致
// BCryptPasswordEncoder() 是 Spring security 5.0 中新增的加密方式
// 登陆时用 BCrypt 加密方式对用户密码进行处理。
.passwordEncoder(new BCryptPasswordEncoder())
.withUser("nasus")
// 保证用户登录时使用 bcrypt 对密码进行处理再与内存中的密码比对
.password(new BCryptPasswordEncoder().encode("nasus")).roles("USER")
.and()
// 登陆时用 BCrypt 加密方式对用户密码进行处理。
.passwordEncoder(new BCryptPasswordEncoder())
.withUser("chenzy")
// 保证用户登录时使用 bcrypt 对密码进行处理再与内存中的密码比对
.password(new BCryptPasswordEncoder().encode("chenzy")).roles("USER");
} @Override
public void configure(WebSecurity web) throws Exception {
// /resource/static 目录下的静态资源,Spring Security 不拦截
web.ignoring().antMatchers("/resource/static**");
}
}

WebSocket 的配置

在上一篇的基础上另外注册一个名为 "/endpointChat" 的节点,以供用户订阅,只有订阅了该节点的用户才能接收到消息;然后,再增加一个名为 "/queue" 消息代理。

@Configuration
// @EnableWebSocketMessageBroker 注解用于开启使用 STOMP 协议来传输基于代理(MessageBroker)的消息,这时候控制器(controller)
// 开始支持@MessageMapping,就像是使用 @requestMapping 一样。
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { @Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
//注册一个名为 /endpointNasus 的 Stomp 节点(endpoint),并指定使用 SockJS 协议。
registry.addEndpoint("/endpointNasus").withSockJS();
//注册一个名为 /endpointChat 的 Stomp 节点(endpoint),并指定使用 SockJS 协议。
registry.addEndpoint("/endpointChat").withSockJS();
} @Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
// 广播式配置名为 /nasus 消息代理 , 这个消息代理必须和 controller 中的 @SendTo 配置的地址前缀一样或者全匹配
// 点对点增加一个 /queue 消息代理
registry.enableSimpleBroker("/queue","/nasus/getResponse");
}
}

控制器 controller

指定发送消息的格式以及模板。详情见,代码注释。

@Autowired
//使用 SimpMessagingTemplate 向浏览器发送信息
private SimpMessagingTemplate messagingTemplate; @MessageMapping("/chat")
public void handleChat(Principal principal,String msg){
// 在 SpringMVC 中,可以直接在参数中获得 principal,principal 中包含当前用户信息
if (principal.getName().equals("nasus")){
// 硬编码,如果发送人是 nasus 则接收人是 chenzy 反之也成立。
// 通过 messageingTemplate.convertAndSendToUser 方法向用户发送信息,参数一是接收消息用户,参数二是浏览器订阅地址,参数三是消息本身
messagingTemplate.convertAndSendToUser("chenzy",
"/queue/notifications",principal.getName()+"-send:" + msg);
} else {
messagingTemplate.convertAndSendToUser("nasus",
"/queue/notifications",principal.getName()+"-send:" + msg);
}
}

登录页面

<!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>

聊天页面

<!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="nasusForm">
<textarea rows="4" cols="60" name="text"></textarea>
<input type="submit"/>
</form> <script th:inline="javascript">
$('#nasusForm').submit(function(e){
e.preventDefault();
var text = $('#nasusForm').find('textarea[name="text"]').val();
sendSpittle(text);
}); // 连接 SockJs 的 endpoint 名称为 "/endpointChat"
var sock = new SockJS("/endpointChat");
var stomp = Stomp.over(sock);
stomp.connect('guest', 'guest', function(frame) {
// 订阅 /user/queue/notifications 发送的消息,这里与在控制器的
// messagingTemplate.convertAndSendToUser 中订阅的地址保持一致
// 这里多了 /user 前缀,是必须的,使用了 /user 才会把消息发送到指定用户
stomp.subscribe("/user/queue/notifications", handleNotification);
}); function handleNotification(message) {
$('#output').append("<b>Received: " + message.body + "</b><br/>")
} function sendSpittle(text) {
stomp.send("/chat", {}, text);
}
$('#stop').click(function() {sock.close()});
</script> <div id="output"></div>
</body>
</html>

页面控制器 controller

@Controller
public class ViewController { @GetMapping("/nasus")
public String getView(){
return "nasus";
} @GetMapping("/login")
public String getLoginView(){
return "login";
} @GetMapping("/chat")
public String getChatView(){
return "chat";
} }

测试

预期结果应该是:两个用户登录系统,可以互相发送消息。但是同一个浏览器的用户会话的 session 是共享的,这里需要在 Chrome 浏览器再添加一个用户。

具体操作在 Chrome 的 设置-->管理用户-->添加用户:文章地址https://www.yii666.com/article/332455.html

Spring Boot2 系列教程 (十七) | 整合 WebSocket 实现聊天室

两个用户分别访问 http://localhost:8080/login 登录系统,跳转至聊天界面:

Spring Boot2 系列教程 (十七) | 整合 WebSocket 实现聊天室

相互发送消息:

Spring Boot2 系列教程 (十七) | 整合 WebSocket 实现聊天室

完整代码

https://github.com/turoDog/Demo/tree/master/springboot_websocket_demo

如果觉得对你有帮助,请给个 Star 再走呗,非常感谢。网址:yii666.com

后语

如果本文对你哪怕有一丁点帮助,请帮忙点好看。你的好看是我坚持写作的动力。

另外,关注之后在发送 1024 可领取免费学习资料。

资料详情请看这篇旧文:Python、C++、Java、Linux、Go、前端、算法资料分享

版权声明:本文内容来源于网络,版权归原作者所有,此博客不拥有其著作权,亦不承担相应法律责任。文本页已经标记具体来源原文地址,请点击原文查看来源网址,站内文章以及资源内容站长不承诺其正确性,如侵犯了您的权益,请联系站长如有侵权请联系站长,将立刻删除

Spring Boot2 系列教程 (十七) | 整合 WebSocket 实现聊天室-相关文章

  1. BCrypt加密算法

    用户表的密码通常使用MD5等不可逆算法加密后存储,为防止彩虹表破解更会先使用一个特定的字符串(如域名)加密,然后再使用一个随机的salt(盐值)加密。 特定字符串是程序代码中固定的,salt是每个密码单独随机,一般给用户表加一个字段单独存储,比较麻烦。BCrypt算

  2. bcrypt 加密算法

    MD5 的特性MD5 是一种加密算法,在调用这个算法的时候,提供一个密码的明文, 调用的结果,得到一个 32 位长度的密文;MD5 算法的特性:相同的字符串,如果多次调用 md5 算法,得到的结果,完全一样;MD5 算法,无法被逆向解密;但是,基于 md5 算法的第二个特性,我们可以

  3. 密码学系列之:bcrypt加密算法详解

    目录简介bcrypt的工作原理bcrypt算法实现bcrypt hash的结构hash的历史简介今天要给大家介绍的一种加密算法叫做bcrypt, bcrypt是由Niels Provos和David Mazières设计的密码哈希函数,他是基于Blowfish密码而来的,并于1999年在USENIX上提出。除了加盐来抵御rainbow table 攻击之外,bcrypt的一个非常

  4. Bcrypt加密算法简介

    用户表的密码通常使用MD5等不可逆算法加密后存储,为防止彩虹表破解更会先使用一个特定的字符串(如域名)加密,然后再使用一个随机的salt(盐值)加密。 特定字符串是程序代码中固定的,salt是每个密码单独随机,一般给用户表加一个字段单独存储,比较麻烦。 BCry

  5. phpass类加密算法

    客户说用md5加密容易被破解,要求使用bcrypt加密,经搜索发现password_hash函数可以轻松对密码实现加盐加密,比md5更安全,缺点是运行慢。phpass是一个开源类库,它可以让我们更方便使用bcrypt加密算法。下载地址:http://www.openwall.com/phpass/使用:// 引入类文件require \\\'PasswordHash.p

  6. [Node.js] 3、搭建hexo博客

    目录一、安装新版本的nodejs和npm二、安装hexo三、安装hexo-admin并配置四、nginx配置五、增加tag六、后台启动七、体验一、安装新版本的nodejs和npm安装n模块:升级node.js到最新稳定版二、安装hexonote: 参考github,不要去其官网: https://github.com/hexojs/hexo安装HexoSetup your blog安装Cactus主

  7. PHP版本对比【转】

    其他历史http://www.cnblogs.com/yjf512/p/3588466.htmlphp5.3改动:1、realpath() 现在是完全与平台无关的. 结果是非法的相对路径比如FILE. \\\"/../x\\\" 将不会工作.2、call_user_func() 系列函数即使被调用者是一个父类也使用 $this.3、数组函数 natsort(), natcasesort(), usort(), uasort(), uksort(), array_flip(), 和 ar

  8. spring security使用哈希加密的密码

    之前我们都是使用MD5 Md5PasswordEncoder 或者SHA ShaPasswordEncoder 的哈希算法进行密码加密,在spring security中依然使用只要指定使用自定义加密算法就行,现在推荐spring使用的BCrypt BCryptPasswordEncoder,一种基于随机生成salt的根据强大的哈希加密算法。首先我们使用spring提供的加密方

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信图片_20190322181744_03.jpg

微信扫一扫打赏

请作者喝杯咖啡吧~

支付宝扫一扫领取红包,优惠每天领

二维码1

zhifubaohongbao.png

二维码2

zhifubaohongbao2.png