最近做了一个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
|
@component public 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" ) @slf4j public 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