SpringBoot实战之整合WebSocket

文章目录

SpringBoot实战之整合WebSocket
前言
一、WebSocket简介
二、WebSocket原理
三、WebSocket特点
四、WebSocket应用场景
五、SpringBoot整合WebSocket实战
- 1、创建项目，添加依赖
- 2、添加配置类
- 3、添加控制器以及封装对象
- 4、添加前台html以及js
- 5、测试验证

前言

Springboot版本：2.3.5.RELEASE
开发工具：idea2019.1
maven版本：3.5.4版本

一、WebSocket简介

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信。一开始的握手需要借助HTTP请求完成。

二、WebSocket原理

网站上的即时通讯是很常见的，比如网页的QQ，微信等。按照以往的技术能力通常是采用轮询等技术解决。HTTP协议是非持久化的，单向的网络协议，在建立连接后只允许浏览器向服务器发出请求后，服务器才能返回相应的数据。当需要即时通讯时，通过轮询在特定的时间间隔（如1秒），由浏览器向服务器发送Request请求，然后将最新的数据返回给浏览器。
缺点：会导致过多不必要的请求，浪费流量和服务器资源，每一次请求、应答，都浪费了一定流量在相同的头部信息上，
而在WebSocket中，只需要服务器和浏览器通过HTTP协议进行一个握手的动作，然后单独建立一条TCP的通信通道进行数据的传送。
WebSocket同HTTP一样也是应用层的协议，但是它是一种双向通信协议，是建立在TCP之上的。广泛被用来做即时通讯，以替代轮询。

图型理解大概这样，连接成功后，会持久保持连接，双向传递信息，直到客户端断开连接。

三、WebSocket特点

WebSocket协议的URL有两种模式，分别为ws和wss，对应http协议中的http和https。
特点如下：

WebSocket使用时需要先建立连接，是一种有状态的协议，在之后的通信过程中可以省略部分状态信息（例如身份认证等）；
WebSocket连接端口在80（ws）和443（wws）上创建，与http端口相同，基本上防火墙都不会阻止WebSocket连接；
心跳消息（ping和pong）将被反复发送，进而保持WebSocket连接一致出于活跃中台。（送方->接收方：ping 接收方->发送方：pong）
WebSocket连接关闭时将发送一个特殊的关闭消息；
WebSocket支持跨域，可以便面Ajax的限制；
WebSocket协议支持扩展，用户可以扩展协议，实现部分自定义的子协议。

四、WebSocket应用场景

在线股票网站
即时聊天
多人在线游戏
应用集群通信
系统性能监控

五、SpringBoot整合WebSocket实战

1、创建项目，添加依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.3.5.RELEASE</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.yangxf</groupId><artifactId>demoWebSocket</artifactId><version>0.0.1-SNAPSHOT</version><name>demoWebSocket</name><description>Demo project for Spring Boot</description><properties><java.version>1.8</java.version></properties><dependencies><!--websocket依赖包--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency><!--websocket前段依赖包--><dependency><groupId>org.webjars</groupId><artifactId>webjars-locator-core</artifactId></dependency><dependency><groupId>org.webjars</groupId><artifactId>sockjs-client</artifactId><version>1.1.2</version></dependency><dependency><groupId>org.webjars</groupId><artifactId>stomp-websocket</artifactId><version>2.3.3</version></dependency><dependency><groupId>org.webjars</groupId><artifactId>jquery</artifactId><version>3.3.1</version></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build>
</project>

2、添加配置类

package com.yangxf.demoWebSocket.config;import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;/*** 〈一句话功能简述〉<br> * 〈WebSocket的配置类〉** @author linwd* @create 2021/4/5* @since 1.0.0*/
@Configuration
@EnableWebSocketMessageBroker//开启WebSocket的消息代理
public class WebSocketConfig  implements WebSocketMessageBrokerConfigurer {@Overridepublic void configureMessageBroker(MessageBrokerRegistry registry) {/*** 设置消息代理的前缀* 即如果消息前缀是/topic，就会将消息转给消息代理，再有消息代理广播给当前连接的客户端；*/registry.enableSimpleBroker("/topic");/*** 表示配置一个或多个前缀，通过这些前缀过滤出需要被注解处理的消息*/registry.setApplicationDestinationPrefixes("/app");}@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {/*** 定义一个前缀为“/chat”的endPoint*/registry.addEndpoint("/chat").withSockJS();}}

3、添加控制器以及封装对象

/*** FileName: HelloController* Author:   linwd* Date:     2021/4/5 12:07* Description: 测试控制器* History:* <author>          <time>          <version>          <desc>* 作者姓名           修改时间           版本号              描述*/
package com.yangxf.demoWebSocket;import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.web.bind.annotation.RestController;/*** 〈一句话功能简述〉<br>* 〈测试控制器〉** @author linwd* @create 2021/4/5* @since 1.0.0*/
@RestController
public class HelloController {@MessageMapping("/hello")@SendTo("/topic/greetings")public Message greetings(Message message) throws Exception {return message;}
}public class Message {private String name;private String context;public String getName() {return name;}public void setName(String name) {this.name = name;}public String getContext() {return context;}public void setContext(String context) {this.context = context;}public Message() {}
}

4、添加前台html以及js

resource目录下添加static文件夹，文件夹下创建html以及js

添加html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><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><script src="/app.js"></script>
</head>
<body>
<div><label for="name">请输入用户名:</label><input type="text" id="name" placeholder="用户名">
</div>
<div><button id="connect" type="button">连接</button><button id="disconnect" type="button" disabled="disabled">断开连接</button>
</div>
<div id="chat" style="display: none;">
</div>
<div><label for="context">请输入聊天内容:</label><input type="text" id="context" placeholder="聊天内容">
</div>
<button id="send" type="button">发送</button>
<div id="conversation" style="display: none;">群聊进行中...
</div>
<div id="greetings" >
</div></body>
</html>

添加js

var stompClient=null;
function sendConnected(connected) {$("#connect").prop("disabled",connected);$("#disconnect").prop("disabled",!connected);if(connected){$("#conversation").show();$("#chat").show();}else{$("#conversation").hide();$("#chat").hide();}$("#greetings").html("");
}/*** 连接事件*/
function connect() {if(!$("#name").val()){return;}var socket=new SockJS("/chat");stompClient=Stomp.over(socket);stompClient.connect({},function (frame) {sendConnected(true);stompClient.subscribe("/topic/greetings",function (greeting) {showGreeting(JSON.parse(greeting.body));});});
}function disconnect() {if(stompClient!=null){stompClient.disconnect();}sendConnected(false);
}function sendName() {stompClient.send("/app/hello",{},JSON.stringify({'name':$("#name").val(),'context':$("#context").val()}));
}function showGreeting(message) {$("#greetings").append("<div>"+message.name+":"+message.context+"</div>");
}$(function () {$("#connect").click(function() {connect();});$("#disconnect").click(function() {disconnect();});$("#send").click(function() {sendName();});});

5、测试验证

可以看出简单的qq聊天
登录成功后，可以跟别人聊天，然后退出qq，就断开连接。

SpringBoot实战之整合WebSocket之群聊相关推荐

springboot整合websocket实现群聊
1.依赖 2.websocket配置: 3.前端 4.注意事项效果: 也可以打开新窗口连接一个新用户发消息 1.依赖 <dependency><groupId>org.spr ...
Spring Boot整合websocket实现群聊，点对点聊天,图片发送，音频发送
参考:基于https://blog.csdn.net/qq_38455201/article/details/80374712 基础上进行添加图片发送和音频发送功能单点图片发送: 单点音频发送: ...
SpringBoot 实战 (九) | 整合 Mybatis
微信公众号:一个优秀的废人如有问题或建议,请后台留言,我会尽力解决你的问题. 前言如题,今天介绍 SpringBoot 与 Mybatis 的整合以及 Mybatis 的使用,本文通过注解的形式实 ...
SpringBoot实战：整合Redis、mybatis，封装RedisUtils工具类等（附源码）
创建SpringBoot项目在线创建方式网址:https://start.spring.io/ 然后创建Controller.Mapper.Service包 SpringBoot整合Redis 引 ...
玩转 SpringBoot 2 之整合 WebSocket 篇
前言本文主要介绍如何在SpringBoot 2 中使用 WebSocket 的快速搭建教程,阅读前需要你必须了解如何搭建 SpringBoot 项目. 在搭建前先来了解一下什么是 WebSocket ...
websocket实现群聊
群聊转载于:https://www.cnblogs.com/caodneg7/p/10177344.html
实战_06_SpringBoot整合redis-cluster集群版本
接上一篇:实战_05_SpringBoot整合redis单机版本https://blog.csdn.net/weixin_40816738/article/details/100658608
SpringBoot实战：整合Redis、mybatis，封装RedisUtils工具类等
创建SpringBoot项目在线创建方式网址:https://start.spring.io/ 然后创建Controller.Mapper.Service包 SpringBoot整合Redis 引 ...
elasticsearch 分页_[Springboot实战系列]整合ElasticSearch实现数据模糊搜索
前言本文介绍了如何整合搜索引擎elasticsearch与springboot,对外提供数据查询接口. 业务介绍我的个人网站需要对mysql数据库内存储的京东商品进行模糊查询(模仿淘宝商品搜索), ...

SpringBoot实战之整合WebSocket之群聊

SpringBoot实战之整合WebSocket

文章目录

前言

一、WebSocket简介

二、WebSocket原理

三、WebSocket特点

四、WebSocket应用场景

五、SpringBoot整合WebSocket实战

1、创建项目，添加依赖

2、添加配置类

3、添加控制器以及封装对象

4、添加前台html以及js

5、测试验证

SpringBoot实战之整合WebSocket之群聊相关推荐

最新文章

热门文章