<>WebSocket

<>1.什么是WebSocket?

webSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。

webSocket使得客户端和服务器之间的数据交换变得更加简单,(在线聊天基础)允许服务端主动向客户端推送数据(服务器可以主动发消息给客户端)
。在webSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

其他特点:

* 较少的控制开销
* 更强的实时性
* 保持连接状态
* 更好的二进制支持
* 可以支持扩展
* 更好的压缩效果
<>2.为什么需要WebSocket?

举例来说,我们想了解今天的天气,只能是客户端向服务器发出请求,服务器返回查询结果。HTTP协议做不到服务器主动向客户端推送信息。

现在,很多网站为了实现推送技术,所用的技术都是Ajax轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。

而比较新的技术去做轮询的效果是comet。这种技术虽然可以双向通信,但依然需要反复发出请求。而且在Comet中,普遍采用的长链接,也会消耗服务器资源。

HTML5定义的WebSocket协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。

<>3.WebSocket实现聊天功能(后端)

Note:WebSocket在前端实现较为复杂,在后端只是起一个中转消息的功能!

* 引入依赖: <!-- WebSocket实现聊天功能--> <dependency> <groupId>org.springframework.boot
</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>
* 编写WebSocket配置类: /** * WebSocket配置类 * * @author liu xiang zheng * @data 4.18
20:57 **/ @Configuration @EnableWebSocketMessageBroker public class
WebSocketConfig implements WebSocketMessageBrokerConfigurer { @Value(
"${jwt.tokenHead}") private String tokenHead; @Autowired private JwtTokenUtil
jwtTokenUtil; @Autowired private UserDetailsService userDetailsService; /** *
让前端连接后端的websocket服务 * 添加这个Endpoint,这样在网页可以通过websocket连接上服务 *
也就是我们配置websocket的服务地址,并且可以指定是否使用socketJS * 前端使用socketJS去连接后端的服务 * @param
registry */ @Override public void registerStompEndpoints(StompEndpointRegistry
registry) { /** * 1.将ws/ep路径注册未stomp的端点,用户连接了这个端点就可以进行websocket通讯,支持socketJS *
2.setAllowedOrigins("*"):允许你跨域 .*表示所有的链接都允许 * 3.withSocketJS():支持socketJS访问 */
registry.addEndpoint("/ws/ep").setAllowedOrigins("*").withSockJS(); } /** *
正常情况下(未使用JWT令牌)我们是不需要配置的,但是此项目中使用了JWT令牌 * 获取JWT令牌同时做相应的处理 * 输入通道参数配置 * * @param
registration */ @Override public void configureClientInboundChannel(
ChannelRegistration registration) { registration.interceptors(new
ChannelInterceptor() { /** * 预发送 * @param message * @param channel * @return */
@Override public Message<?> preSend(Message<?> message, MessageChannel channel)
{ /** * StompHeaderAccessor的目的:用户判断是不是链接 * 是链接则获取到对应的token同时设置到相应的用户里面去 */
StompHeaderAccessor accessor = MessageHeaderAccessor.getAccessor(message,
StompHeaderAccessor.class); // 判断是否是连接,如果是,需要获取token,并且设置用户对象 if(StompCommand.
CONNECT.equals(accessor.getCommand())){ // Auth-Token 不是随便写的参数 是前端传递给我们的参数
String token = accessor.getFirstNativeHeader("Auth-Token"); /* 不为空做相应的截取 */ if(!
StringUtils.isEmpty(token)){ String authToken = token.substring(tokenHead.length
()); // 拿到用户名 String username = jwtTokenUtil.getUserNameFromToken(authToken);
// token中存在用户名 则可以进行相应的登录 if(!StringUtils.isEmpty(username)){ // 登录 UserDetails
userDetails= userDetailsService.loadUserByUsername(username); //
验证token是否有效,重新设置用户对象 if(jwtTokenUtil.validateToken(authToken,userDetails)){
UsernamePasswordAuthenticationToken authenticationToken = new
UsernamePasswordAuthenticationToken(userDetails, null, userDetails.
getAuthorities()); SecurityContextHolder.getContext().setAuthentication(
authenticationToken); accessor.setUser(authenticationToken); } } } } return
message; } }); } /** * 配置消息代理 * @param registry */ @Override public void
configureMessageBroker(MessageBrokerRegistry registry) { /** *
配置代理域,可以配置多个,配置代理的目的地前缀为/queue,可以在配置域上客户端推送消息 */ registry.enableSimpleBroker(
"queue"); } }
配置类完成以后,去写对应的接口类,让客户端调用我们的方法。

* 消息实体类编写: /** * 消息 * * @author liu xiang zheng * @data 4.19 10:48 **/ @Data
@EqualsAndHashCode(callSuper = false) @Accessors(chain = true) public class
ChatMsg { // 哪个人发的消息 private String from; // 发到哪里去 private String to; // 内容
private String content; // 时间 private LocalDateTime date; // 发送消息的昵称 private
String formNickName; }
* Controller接口编写: /** * websocket * * @author liu xiang zheng * @data 4.19
10:53 **/ @Controller public class WsController { @Autowired private
SimpMessagingTemplate simpMessagingTemplate; @MessageMapping("/ws/chat") public
void handleMsg(Authentication authentication, ChatMsg chatMsg){ /** * 获取当前用户对象
*/ Admin admin = (Admin)authentication.getPrincipal(); chatMsg.setFrom(admin.
getUsername()); chatMsg.setFormNickName(admin.getName()); chatMsg.setDate(
LocalDateTime.now()); /** * 此处的 /queue/chat 是我们最开始在配置类里面配置的 *
它也就会通过queue转到配置类里面去 */ simpMessagingTemplate.convertAndSendToUser(chatMsg.getTo(
),"/queue/chat",chatMsg); } }
* Security配置类中放行: "/ws/**"

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信