SpringBoot集成WebSocket 打造聊天室

  |     |  

什么是WebSocket?

WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。依靠这种技术可以实现客户端和服务器端的长连接,双向实时通信。

WebSocket协议被设计来取代用HTTP作为传输层的双向通讯技术,基于大部分Web服务都是HTTP协议,WebSocket仍使用HTTP来作为初始的握手(handshake),在握手中对HTTP协议进行升级,当服务端收到这个HTTP的协议升级请求后,如果支持WebSocket协议则返回HTTP状态码101,这样,WebSocket的握手便成功了。

特点

异步、事件触发
可以发送文本,图片等流文件
数据格式比较轻量,性能开销小,通信高效
使用ws或者wss协议的客户端socket,能够实现真正意义上的推送功能
缺点:
部分浏览器不支持,浏览器支持的程度与方式有区别,需要各种兼容写法。

长连接

与 AJAX 轮训的方式差不多,但长连接不像 AJAX 轮训一样,而是采用的阻塞模型(一直打电话,没收到就不挂电话);客户端发起连接后,如果没消息,就一直不返回 Response 给客户端。直到有消息才返回,返回完之后,客户端再次建立连接,周而复始。
在没有 WebSocket 之前,大家常用的手段应该就是轮训了,比如每隔几秒发起一次请求,但这样带来的就是高性能开销,都知道一次 HTTP 响应是需要经过三次握手和四次挥手,远不如 TCP 长连接来的划算。

WebSocket 事件

与SpringBoot集成Demo

导入jar包,

1
compile group: 'org.springframework.boot', name: 'spring-boot-starter-websocket', version: '2.0.4.RELEASE'

声明服务端点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
@RestController
@ServerEndpoint("/chat-room/{username}")
public class ChatRoomServerEndpoint {

private static final Logger log = LoggerFactory.getLogger(ChatRoomServerEndpoint.class);

/**
* Open session.
* 连接服务端,打开session
*
* @param username the 用户名
* @param session the 会话
*/
@OnOpen
public void openSession(@PathParam("username") String username, Session session) {
LIVING_SESSIONS_CACHE.put(username, session);
String message = "欢迎用户[" + username + "] 来到聊天室!";
log.info(message);
sendMessageAll(message);
sendAllUser();
}

/**
* On message.
* 向客户端推送消息
*
* @param username the 用户名
* @param message the 消息
*/
@OnMessage
public void onMessage(@PathParam("username") String username, String message) {
log.info("{}发送消息:{}", username, message);
sendMessageAll("用户[" + username + "] : " + message);
}

/**
* On close.
* 连接关闭
*
* @param username the 用户名
* @param session the 会话
*/
@OnClose
public void onClose(@PathParam("username") String username, Session session) {
//当前的Session 移除
LIVING_SESSIONS_CACHE.remove(username);
//并且通知其他人当前用户已经离开聊天室了
sendMessageAll("用户[" + username + "] 已经离开聊天室了!");
sendAllUser();
try {
session.close();
} catch (IOException e) {
e.printStackTrace();
}
}

/**
* On error.
* 出现错误
*
* @param session the session
* @param throwable the throwable
*/
@OnError
public void onError(Session session, Throwable throwable) {
try {
session.close();
} catch (IOException e) {
e.printStackTrace();
}
throwable.printStackTrace();
}


/**
* On message.
* 点到点推送消息
*
* @param sender the 发送至
* @param receive the 接受者
* @param message the 消息
*/
@GetMapping("/chat-room/{sender}/to/{receive}")
public void onMessage(@PathVariable("sender") String sender, @PathVariable("receive") String receive, String message) {
sendMessage(LIVING_SESSIONS_CACHE.get(receive), MessageType.MESSAGE,
"[" + sender + "]" + "-> [" + receive + "] : " + message);
log.info("[" + sender + "]" + "-> [" + receive + "] : " + message);
}

}

使用枚举类区分推送给前端类消息类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public enum MessageType {

/**
* 用户名.
*/
USERNAME("username"),

/**
* 普通消息.
*/
MESSAGE("message");

private String value;

public String getValue() {
return value;
}

MessageType(String value) {
this.value = value;
}
}

推送消息工具类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
public final class WebSocketUtils {

/**
* 模拟存储 websocket session 使用
*/
public static final Map<String, Session> LIVING_SESSIONS_CACHE = new ConcurrentHashMap<>();

/**
* Send 消息至客户端
*
* @param message the message
*/
public static void sendMessageAll(String message) {
LIVING_SESSIONS_CACHE.forEach((sessionId, session) -> sendMessage(session, MessageType.MESSAGE, message));
}

/**
* Send 所有用户名至客户端
*/
public static void sendAllUser() {
LIVING_SESSIONS_CACHE.forEach((sessionId, session) -> sendMessage(session,
MessageType.USERNAME, LIVING_SESSIONS_CACHE.keySet()));
}

/**
* 发送给指定用户消息
*
* @param session 用户 session
* @param type the type
* @param message 发送内容
*/
public static void sendMessage(Session session, MessageType type, Object message) {
if (session == null) {
return;
}
final RemoteEndpoint.Basic basic = session.getBasicRemote();
if (basic == null) {
return;
}
try {
String data = JSONParseUtils.object2JsonString(ApiResult.prepare().success(message, 200, type.getValue()));
//向session推送数据
basic.sendText(data);
} catch (IOException e) {
e.printStackTrace();
}
}
}

配置WebSocket

1
2
3
4
5
6
7
8
9
10
11
12
13
@EnableWebSocket
@Configuration
public class WebSocketConfiguration {
/**
* Server endpoint exporter server endpoint exporter.
*
* @return the server endpoint exporter
*/
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}

聊天室页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基于WebSocket 简易聊天室</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<form class="form-horizontal col-sm-8" role="form">
<h2 class="center">聊&nbsp;&nbsp;天&nbsp;&nbsp;室&nbsp;</h2>
<div class="form-group">
<label for="message_content" class="col-sm-1 control-label">消息列表</label>
<div class="col-sm-4">
<textarea id="message_content" class="form-control" readonly="readonly"
cols="57" rows="10">
</textarea>
</div>
<label for="user-list" class="col-sm-1 control-label">用户列表</label>
<div class="col-sm-2">
<textarea id="user-list" readonly="readonly" class="form-control"
cols="8" rows="10"></textarea>
</div>
</div>

<div class="form-group">
<label for="in_user_name" class="col-sm-2 control-label">用户姓名 &nbsp;</label>
<div class="col-sm-8">
<input id="in_user_name" class="form-control" value=""/>
</div>
<button type="button" id="btn_join" class="btn btn-default">加入聊天室</button>
<button type="button" id="btn_exit" class="btn btn-danger">离开聊天室</button>
</div>

<div class="form-group">
<label for="in_room_msg" class="col-sm-2 control-label">群发消息 &nbsp;</label>
<div class="col-sm-8">
<input id="in_room_msg" class="form-control" value=""/>
</div>
<button type="button" id="btn_send_all" class="btn btn-default">发送消息</button>
</div>

<br/><br/><br/>

<h3 class="center">好友聊天</h3>
<br/>
<div class="form-group">
<label for="in_sender" class="col-sm-2 control-label">发送者 &nbsp;</label>
<div class="col-sm-8">
<input id="in_sender" class="form-control" value=""/>
</div>
</div>
<div class="form-group">
<label for="in_receive" class="col-sm-2 control-label">接受者 &nbsp;</label>
<div class="col-sm-8">
<input id="in_receive" class="form-control" value=""/>
</div>
</div>
<div class="form-group">
<label for="in_point_message" class="col-sm-2 control-label">发送消息 &nbsp;</label>
<div class="col-sm-8">
<input id="in_point_message" class="form-control" value=""/>
</div>
<button type="button" class="btn btn-default" id="btn_send_point">发送消息</button>
</div>

</form>
</body>

<script type="text/javascript">
$(document).ready(function () {
var urlPrefix = 'ws://localhost:8080/chat-room/';
var ws = null;
$('#btn_join').click(function () {
var username = $('#in_user_name').val();
var url = urlPrefix + username;
ws = new WebSocket(url);
ws.onopen = function () {
console.log("建立 websocket 连接...");
};
ws.onmessage = function (event) {
var data = JSON.parse(event.data);
console.info(data);
if (data.msg === "message") {
//服务端发送的消息
$('#message_content').append(data.result + '\n');
} else if (data.msg === "username") {
var result = '';
$.each(data.result, function (index, value) {
result += value + '\n';
})
$('#user-list').text(result);
}
};
ws.onclose = function () {
$('#message_content').append('用户[' + username + '] 已经离开聊天室!');
console.log("关闭 websocket 连接...");
}
});
//客户端发送消息到服务器
$('#btn_send_all').click(function () {
var msg = $('#in_room_msg').val();
if (ws) {
ws.send(msg);
}
});
// 退出聊天室
$('#btn_exit').click(function () {
if (ws) {
ws.close();
}
});

$("#btn_send_point").click(function () {
var sender = $("#in_sender").val();
var receive = $("#in_receive").val();
var message = $("#in_point_message").val();
$.get("/chat-room/" + sender + "/to/" + receive + "?message=" + message, function () {
console.info("发送成功!" + sender + "向" + receive + "发送了" + message);
})
})
})
</script>
</html>

效果图:

F12 查看WebSocket是否连接成功。

源码已上传GitHub:https://github.com/liaozihong/SpringBoot-Learning/tree/master/SpringBoot-WebSocket
参考链接:
https://blog.battcn.com/2018/06/27/SpringBoot/v2-other-websocket/
https://www.jianshu.com/p/04b1f4b8419f

文章目录
  1. 1. 什么是WebSocket?
  2. 2. 特点
  3. 3. 长连接
  4. 4. WebSocket 事件
  5. 5. 与SpringBoot集成Demo
作者共写了53.1k个字 本站总访问量  |   您是访问本站的第个小伙伴