# SpringBoot +WebSocket 实现点对点/广播聊天
## 简介
**WebSocket** 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
**WebSocket** 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在，很多网站为了实现推送技术，所用的技术都是 **AJAX 轮询**。轮询是在特定的的时间间隔（如每 1 秒），由浏览器对服务器发出 HTTP 请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而 HTTP 请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更**实时地进行通讯。**
**轮询: 不断地向服务器发送请求，服务器也频繁的被动回应请求；**
**WebSocket：由服务器向客户端主动发起回应；**
## 1. pom.xml
```html
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
```
## **2. WebSocketConfig**
```java
/**
* @author Dazhi
* @date 2019/4/25 20:40
*/
@Component
public class WebSocketConfig {
/**
* 注入ServerEndpointExporter
*/
@Bean
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
```
## 3. MessageVO
```java
/**
* @author Dazhi
* @date 2019/4/25 20:45
*/
@Data
public class MessageVo {
/**
* 消息生产者ID
*/
private String productorId;
/**
* 消息消费者者ID
*/
private String comsumerId;
/**
* 消息
*/
private String message;
/**
* 生产者昵称
*/
private String nickname;
}
```
## 4. WebSocketServer（重点）
```java
/**
* @author Dazhi
* @date 2019/4/25 20:50
*/
@ServerEndpoint("/websocket/{userId}")
@Component
@Slf4j
public class WebSocket {
/**
* String : 用户ID
* Session： 回话
*/
public static Map<String, Session> sessionMap = new ConcurrentHashMap<String, Session>();
/**
* onOpen是当用户发起连接时，会生成一个用户的Session 注意此Session是 javax.websocket.Session;
* 然后我们用userId作为Key Session作为Vaule存入Map中暂存起来
*
* @param userId
* @param session
*/
@OnOpen
public void onOpen(@PathParam("userId") String userId, Session session) {
log.info("====>WebSocketService onOpen: " + userId);
if (sessionMap == null) {
sessionMap = new ConcurrentHashMap<String, Session>();
}
sessionMap.put(userId, session);
}
/**
* onClose 是用户关闭聊天窗时，将用户session移除
*
* @param userId
*/
@OnClose
public void onClose(@PathParam("userId") String userId) {
log.info("====>WebSocketService OnClose: " + userId);
sessionMap.remove(userId);
}
/**
* onMessage 实现聊天功能， message是前端传来的JSON字符串。其中含有MessageVo里的信息。根据vo实现点对点/广播聊天。
*
* @param message
*/
@OnMessage
public void onMessage(String message) {
log.info("====>WebSocketService OnMessage: " + message);
MessageVo vo = JSON.parseObject(message, MessageVo.class);
if (vo.getConsumerId() == null || vo.getConsumerId().isEmpty()) {
//广播
toAll(message);
} else {
//点对点
one2one(vo, message);
}
}
/**
* 当出现异常时候自动调用该方法。
*
* @param t
*/
@OnError
public void error(Throwable t) {
t.printStackTrace();
}
/**
* 点对点
* session.getAsyncRemote().sendText(message); 即向目标session发送消息。
*
*/
private static void one2one(MessageVo vo, String message) {
Session consumerSession = sessionMap.get(vo.getConsumerId());
if (consumerSession == null) {
log.info("消息消费者不存在");
} else {
consumerSession.getAsyncRemote().sendText(message);
}
}
/**
* 广播
* 向所有session发送消息
*/
private static void toAll(String message) {
for (Session session : sessionMap.values()) {
session.getAsyncRemote().sendText(message);
}
}
}
```
## 5. 页面 HTML
用 Easyui 快速搭建
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>聊天室</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<style type="text/css">
* {
font-size: 14px;
padding: 0;
margin: 0;
}
#chatRecord {
position: relative;
margin: 20px auto;
border: 1px solid steelblue;
width: 600px;
height: 500px;
}
.msgContent {
width: auto;
max-width: 250px;
height: auto;
word-break: break-all;
margin: 5px;
padding: 3px;
border-radius: 5px;
}
#chatZone .left {
list-style: none;
text-align: left;
}
#chatZone .left .p {
float: left;
text-align: left;
background-color: lightgrey;
font-size: 4ex;
}
#chatZone .left .title {
text-align: left;
font-size: 5px;
color: grey;
}
#chatZone .right {
float: right;
list-style: none;
text-align: right;
}
#chatZone .right .title {
text-align: right;
font-size: 5px;
color: grey;
clear: both;
}
#chatZone .right .p {
float: right;
text-align: right;
background-color: yellowgreen;
font-size: 4ex;
}
</style>
</head>
<body>
<p>
帐号：<input type="text" id="linkAgent" class="easyui-textbox" style="width: 150px"/>
昵称：<input type="text" id="nickname" class="easyui-textbox" style="width: 150px"/>
发送给：<input type="text" id="toAgent" class="easyui-textbox" style="width: 150px"/>
<a id="btnLink" href="javascript:void(0)" class="easyui-linkbutton c1">开始聊天</a></p>
<div data-options="region:'center'" class="easyui-panel" style="width: 50%;height:500px; padding: 5px;"
id="chatRecord">
<ul class="chatDialog-main clearfix" id="chatZone">
</ul>
</div>
<div class="easyui-panel" style="width: 50%; padding: 5px;">
<table height="100%" cellpadding="0px" cellspacing="0px">
<tr>
<td height="100px">
<table cellpadding="5px" cellspacing="0" border="0">
<tr style="vertical-align: middle;">
<td>
<textarea
style="width: 600px; height: 100px; overflow: auto; vertical-align: middle;"
id="tx
基于 Java SpringBoot +WebSocket 实现点对点广播聊天【100011536】
版权申诉
154 浏览量
2023-04-04
09:22:39
上传
评论
收藏 224KB ZIP 举报
100011536-基于 Java SpringBoot +WebSocket 实现点对点广播聊天.zip （23个子文件） 
websock 
mvnw.cmd 6KB pom.xml 2KB src test java com itaem dazhi websocketdemo WebsocketDemoApplicationTests.java 362B main resources application.properties 1B static js jquery.easyui.min.js 443KB jquery.easyui.mobile.js 4KB easyloader.js 7KB jquery.min.js 95KB json2.js 18KB css easyui.css 70KB
index.html 7KB java com itaem dazhi websocketdemo modules websocket server WebSocket.java 3KB vo MessageVo.java 439B common Result.java 4KB WebsocketDemoApplication.java 348B config WebSocketConfig.java 496B LICENSE 1KB .mvn wrapper maven-wrapper.properties 116B
maven-wrapper.jar 47KB MavenWrapperDownloader.java 5KB mvnw 9KB .gitignore 303B README.md 13KB资源评论
神仙别闹
- 粉丝: 2687
- 资源: 7642
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减5.97元 开通VIP
