最近做了一个springboot的项目，被springboot那简介的配置所迷住。刚好项目中，用到了websocket。于是，我就想着，做一个springboot+websocket简单的网页聊天demo。
效果展示：
当然，项目很简单，没什么代码，一眼就能明白
导入websocket的包。
通过使用springboot导入包的时候，我们可以发现，很多包都是以 spring-boot-starter 开头的，对于我这种强迫症 ，简直是福音
|
1
2
3
4
|
<dependency> <groupid>org.springframework.boot</groupid> <artifactid>spring-boot-starter-websocket</artifactid></dependency> |
配置websocket
服务端
首先新建一个websocketconfig的类，添加 @component 注解 注入一个bean
|
1
2
3
4
5
6
7
8
9
|
@componentpublic class websocketconfig { @bean public serverendpointexporter serverendpointexporter() { return new serverendpointexporter(); }} |
新建一个service，本来觉得是新建一个控制器，但是我觉得这也不是控制器，但是也不太是service。最后还是选择新建一个servece。这里你如果有更好的想法可以按照你的来。
这个service里面有4个方法，这些方法很简单，通过名称就可以看出是什么意思。
|
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
|
@component@serverendpoint("/websocket")@slf4jpublic class websocket { private session session; private static copyonwritearrayset<websocket> websockets = new copyonwritearrayset<>(); private messagevo messagevo = new messagevo(); @onopen public void onopen(session session) { this.session = session; websockets.add(this); messagevo.settype(1); messagevo.setusernum(websockets.size()); messagevo.setmessage("有新的连接"); objectmapper mapper = new objectmapper(); string json = ""; try { json = mapper.writevalueasstring(messagevo); } catch (exception ex) { log.error(ex.getmessage()); } this.sendmessage(json); log.info("【websocket消息】有新的连接, 总数:{}", websockets.size()); } @onclose public void onclose() { websockets.remove(this); messagevo.settype(2); messagevo.setusernum(websockets.size()); messagevo.setmessage("有用户离开"); objectmapper mapper = new objectmapper(); string json = ""; try { json = mapper.writevalueasstring(messagevo); } catch (exception ex) { log.error(ex.getmessage()); } this.sendmessage(json); log.info("【websocket消息】连接断开, 总数:{}", websockets.size()); } @onmessage public void onmessage(string message) { messagevo.settype(3); messagevo.setusernum(websockets.size()); messagevo.setmessage(message); objectmapper mapper = new objectmapper(); string json = ""; try { json = mapper.writevalueasstring(messagevo); } catch (exception ex) { log.error(ex.getmessage()); } this.sendmessage(json); log.info("【websocket消息】收到客户端发来的消息:{}", message); } public void sendmessage(string message) { for (websocket websocket : websockets) { log.info("【websocket消息】广播消息, message={}", message); try { websocket.session.getbasicremote().sendtext(message); } catch (exception e) { e.printstacktrace(); } } }} |
客户端
客户端也就是我们的html，我用的是原生html5的websocket ,不需要其他的js。直接在html中写js就可以
|
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
|
<script type="application/javascript"> var websocket = null; var cahtnum = $('.chat-num').text(); if ('websocket' in window) { websocket = new websocket('ws://localhost:8080/chat/websocket'); } else { alert('该浏览器不支持websocket'); } websocket.onopen = function (event) { console.log('websocket建立连接'); } websocket.onclose = function (event) { console.log('websocket关闭连接'); } websocket.onmessage = function (event) { console.log('websocket收到消息' + event.data); var result = $.parsejson(event.data); if (result.type == 3) { var element = document.getelementbyid('message-template').innerhtml; $('.message-container').append(element); $(".message-content:last").html(result.message); } else { $('.chat-num').text(result.usernum); } } websocket.onerror = function (event) { console.log('websocket通信发生错误'); } window.onbeforeunload = function (event) { websocket.close(); } $('.send-message').click(function () { var message = $('.chat-message').val(); if (message == "") { mdui.alert('请输入要发送的消息'); return; } sendmessage(message); $('.chat-message').val(""); }) function sendmessage(message) { websocket.send(message); }</script> |
这个就是全都的功能，非常简单，没什么特别的功能和代码。
最后附上github的源代码传送门
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：http://www.jianshu.com/p/2042cbe5a62c
