如何在Spring中配置Websocket

痛定思痛。 2022-08-20 03:29 218阅读 0赞

Websocket是HTML5的一项新技术，可以让服务端和客户端进行实时的通信，主要的使用场景有: 实时的聊天系统，对实时性要求比较高的游戏，或者金融行业对股票市场数据的及时获取等。在Spring3的时候就已经有了对Websocket的支持，不过需要一些高版本的web容器来运行，比如Tomcat7.0.47+，Jetty9等。

在Spring的官网上有关于Websocket的示例工程，[https://spring.io/guides/gs/messaging-stomp-websocket/][https_spring.io_guides_gs_messaging-stomp-websocket]，里面简单介绍了如何通过Spring-boot来进行Websocket系统的构建。我们的例子将基于这个例子进行修改，但是是使用传统的Spring的方式进行配置。

## 依赖包 ##

首先我们需要添加相关的依赖包:

*  Websocket需要servlet3.1的版本
 *  spring-websocket和spring-messaging是Spring关于Websocket的组件
 *  使用Jackson进行json数据的处理

build.gradle

## xml配置（类配置） ##

我们有两种方式进行Websocket的配置，一种是通过xml文件的方式，在这里我们定义了websocket的配置信息，这样服务器往客户端发送消息就可以通过`/topic/xx`来发送，客户端则可以通过`/app/hello`来发送消息到服务端。

另外一种方式是通过类的方式，代码如下，功能与上面的xml配置相同:

WebSocketConfig.java

## 消息类和Controller定义 ##

Controller定义:

WebSocketConfig.java

消息model的定义:

WebSocketConfig.java

在web.xml中设置controller的url前缀，这样可以避免一些页面的url被controller拦截。

web.xml

## 客户端页面 ##

首先下载`stomp.js`和`sockjs.js`，然后编写一个html页面进行客户端websocket的连接，并实现发送消息和接收消息的功能。我们使用SockJS的方式来创建Websocket连接，注意url要加上domain名称(这里是`server`)和`api`前缀。

demo.html

<table style="margin:0px; padding:0px; border:none; border-spacing:0px"> 
 <tbody style="margin:0px; padding:0px"> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:0px"> <pre style="margin-top:0px; margin-bottom:0px; padding:0px 15px 0px 0px; border-right-width:1px; border-style:none solid none none; border-right-color:rgb(204,204,204); font-family:Menlo,Monaco,'Andale Mono','lucida console','Courier New',monospace; line-height:1.5; overflow-x:auto; font-size:0.9em; text-align:right; background:none">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
</pre> </td> 
 <td style="margin:0px; padding:0px 0px 0px 15px; width:1287px; overflow-x:auto"> <pre style="margin-top:0px; margin-bottom:0px; padding:0px; border:none; font-family:Menlo,Monaco,'Andale Mono','lucida console','Courier New',monospace; line-height:1.5; overflow-x:auto; font-size:0.9em; background:none"><code style="margin:0px; padding:0px; border:none; font-family:Menlo,Monaco,'Andale Mono','lucida console','Courier New',monospace; font-size:0.9em; background:none">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Hello WebSocket&lt;/title&gt; &lt;script src="resources/sockjs-0.3.4.js"&gt;&lt;/script&gt; &lt;script src="resources/stomp.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; var stompClient = null; function setConnected(connected) { document.getElementById('connect').disabled = connected; document.getElementById('disconnect').disabled = !connected; document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden'; document.getElementById('response').innerHTML = ''; } function connect() { var socket = new SockJS('/server/api/hello'); stompClient = Stomp.over(socket); stompClient.connect({}, function(frame) { setConnected(true); console.log('Connected: ' + frame); stompClient.subscribe('/topic/greetings', function(greeting){ showGreeting(JSON.parse(greeting.body).content); }); }); } function disconnect() { if (stompClient != null) { stompClient.disconnect(); } setConnected(false); console.log("Disconnected"); } function sendName() { var name = document.getElementById('name').value; stompClient.send("/app/hello", {}, JSON.stringify({ 'name': name })); } function showGreeting(message) { var response = document.getElementById('response'); var p = document.createElement('p'); p.style.wordWrap = 'break-word'; p.appendChild(document.createTextNode(message)); response.appendChild(p); } &lt;/script&gt; &lt;/head&gt; &lt;body onload="disconnect()"&gt; &lt;noscript&gt;&lt;h2 style="color: #ff0000"&gt;Seems your browser doesn't support Javascript! Websocket relies on Javascript being enabled. Please enable Javascript and reload this page!&lt;/h2&gt;&lt;/noscript&gt; &lt;div&gt; &lt;div&gt; &lt;button id="connect" onclick="connect();"&gt;Connect&lt;/button&gt; &lt;button id="disconnect" disabled="disabled" onclick="disconnect();"&gt;Disconnect&lt;/button&gt; &lt;/div&gt; &lt;div id="conversationDiv"&gt; &lt;label&gt;What is your name?&lt;/label&gt;&lt;input type="text" id="name" /&gt; &lt;button id="sendName" onclick="sendName();"&gt;Send&lt;/button&gt; &lt;p id="response"&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> </td> 
 </tr> 
 </tbody> 
</table>

运行结果：

[![websocket-run.png][]][websocket-run.png]

浏览器console信息:

## gradle运行jetty9 ##

gradle内置的Jetty版本是Jetty6，由于版本较低不支持websocket，所以我们测试的话需要打包并部署到Jetty9或Tomcat7.0.47+上，但我们可以通过其他gradle插件来把我们的本地服务运行到Jetty9上。这里介绍2个插件，[Gretty][]和[Cargo][]。

#### Gretty ####

在`build.gradle`中添加如下脚本:

build.gradle

然后运行`gradle appRun`即可。

#### Cargo ####

在`build.gradle`中添加如下脚本，注意要先下载jetty9的安装包并解压:

build.gradle

然后运行`gradle war CargoRunLocal`，注意首先要打出war包，然后插件会自动部署war包到Jetty9的安装目录下，这种方式不大灵活，比如一些页面的修改都需要重新部署才能进行测试。

最后附上Spring关于Websocket的文档链接，请见[这里][Link 1]。

[https_spring.io_guides_gs_messaging-stomp-websocket]: https://spring.io/guides/gs/messaging-stomp-websocket/
[websocket-run.png]: http://zhaozhiming.github.io/images/post/2015-5/websocket-run.png
[Gretty]: https://github.com/akhikhl/gretty
[Cargo]: https://github.com/bmuschko/gradle-cargo-plugin
[Link 1]: http://docs.spring.io/spring/docs/current/spring-framework-reference/html/websocket.html