WebSocket 是什么？
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
WebSocket 能做什么？
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
WebSocket 如何实现？
WebSocket 协议本质上是一个基于 TCP 的协议。为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，服务器端解析然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。
今天的Demo是基于 SpringBoot 项目使用 WebSocket 构建交互式Web应用程序，网页功能内容类似匿名聊天室。参考文档：https://spring.io/guides/gs/messaging-stomp-websocket/
1.创建新项目，引入依赖：
New Spring Starter Project，设置项目名为SpringBootWebSocket，这里版本使用的是Maven 3.5、Java 8，起步依赖可以选Web和WebSocket。项目建好后打开pom.xml引入所需要的依赖如下：
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator-core</artifactId>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>sockjs-client</artifactId>
<version>1.0.2</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>stomp-websocket</artifactId>
<version>2.3.3</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.3.7</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.1.0</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
2.客户端A发送消息给服务器，服务器需要通过提取消息并返回该消息给所有客户端浏览器，Spring将使用Jackson JSON库自动将消息类型实例转换封装为JSON格式。这里需要创建消息的实体类模型Message.java和返回消息实体类模型Greeting.java：
public class HelloMessage {
private String name;
public HelloMessage() {
}
public HelloMessage(String name) {
this.name = name;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
public class Greeting {
private String content;
public Greeting() {
}
public Greeting(String content) {
this.content = content;
}
public String getContent() {
return content;
}
}
控制层如下：
@Controller
public class GreetingController {
@MessageMapping("/hello")
@SendTo("/topic/greetings")
public Greeting greeting(HelloMessage message) throws Exception {
Thread.sleep(1000); // simulated delay
Date day=new Date();
SimpleDateFormat df = new SimpleDateFormat("HH:mm:ss");
return new Greeting(df.format(day) + ":" + HtmlUtils.htmlEscape(message.getName()));
}
}
}
这个控制器简洁而简单，但还有很多功能。其中@MessageMapping 注解确保如果一个消息被发送到目的地“/hello”，则该greeting()方法被调用。在内部，该方法的实现通过使线程休眠1秒来模拟处理延迟。这是为了演示客户端发送消息后，只要需要异步处理消息，服务器就可以使用。客户可以继续进行它需要做的任何工作而无需等待响应。在1秒延迟之后，该greeting()方法创建一个Greeting 对象并返回它。返回值被广播给所有订阅者，如@SendTo 注解中指定的那样“/ topic / greetings” 。
3.配置Spring以进行STOMP消息传递
创建完服务的基本组件，接下来可以配置Spring以启用WebSocket和STOMP消息传递。创建WebSocketConfig 实现WebSocketMessageBrokerConfigurer 接口。
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic");
config.setApplicationDestinationPrefixes("/app");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/gs-guide-websocket").withSockJS();
}
}
其中，@Configuration 表示它是Spring配置类。注解@EnableWebSocketMessageBroker 顾名思义它支持由消息代理支持的WebSocket消息处理。configureMessageBroker()方法实现默认方法WebSocketMessageBrokerConfigurer以配置消息代理。它首先调用enableSimpleBroker()以启用一个简单的基于内存的消息代理，以在前缀为“/ topic”的目标上将回传消息传回客户端。它还为绑定了@MessageMapping注释方法的消息指定“/ app”前缀。此前缀将用于定义所有消息映射; 例如，“/ app / hello”是GreetingController.greeting()方法映射到处理的端点。
该registerStompEndpoints()方法注册“/ gs-guide-websocket”端点，启用SockJS后备选项，以便在WebSocket不可用时可以使用备用传输。SockJS客户端将尝试连接到“/ gs-guide-websocket”并使用可用的最佳传输（websocket，xhr-streaming，xhr-polling等）。
- 创建页面
index.html文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>匿名聊天室</title>
<link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/main.css" rel="stylesheet">
<script src="/webjars/jquery/jquery.min.js"></script>
<script src="/webjars/sockjs-client/sockjs.min.js"></script>
<script src="/webjars/stomp-websocket/stomp.min.js"></script>
<script src="/app.js"></script>
</head>
<body>
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being
enabled. Please enable
Javascript and reload this page!</h2></noscript>
<div id="main-content" class="container">
<div class="row">
<div class="col-md-6">
<form class="form-inline">
<div class="form-group">
<label for="connect">WebSocket Connect：</label>
<button id="connect" class="btn btn-default" type="submit">连接</button>
<button id="disconnect" class="btn btn-default" type="submit" disabled="disabled">断开 </button>
</div>
</form>
</div>
<div class="col-md-6">
<form class="form-inline">
<div class="form-group">
<label for="name">Send Message</label>
<input type="text" id="name" class="form-control" placeholder="typing here...">
</div>
<button id="send" class="btn btn-default" type="submit">Send</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table id="conversation" class="table table-striped">
<thead>
<tr>
<th>Chat Message</th>
</tr>
</thead>
<tbody id="greetings">
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
app.js：
var stompClient = null;
function setConnected(connected) {
$("#connect").prop("disabled", connected);
$("#disconnect").prop("disabled", !connected);
if (connected) {
$("#conversation").show();
}
else {
$("#conversation").hide();
}
$("#greetings").html("");
}
function connect() {
var socket = new SockJS('/gs-guide-websocket');
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() {
stompClient.send("/app/hello", {}, JSON.stringify({'name': $("#name").val()}));
}
function showGreeting(message) {
$("#greetings").append("<tr><td>" + message + "</td></tr>");
}
$(function () {
$("form").on('submit', function (e) {
e.preventDefault();
});
$( "#connect" ).click(function() { connect(); });
$( "#disconnect" ).click(function() { disconnect(); });
$( "#send" ).click(function() { sendName(); });
});
这个JavaScript文件的主要部分是 connect() 和 sendName() 功能。
该 connect() 函数使用 SockJS 和 stomp.js 打开到“/ gs-guide-websocket”的连接，这是 SockJS服务器等待连接的地方。在成功连接后，客户端订阅“/ topic / greetings”目的地，服务器将在该目的地发布返回消息。当在该目的地上收到返回消息时，它会将一个段落元素附加到DOM以显示返回消息。
该 sendName() 函数检索用户输入的名称，并使用STOMP客户端将其发送到“/ app / hello”目的地（GreetingController.greeting() 接收的地方）。
项目代码就这些，运行启动类，开启多个浏览器输入http://localhost:8080 点击连接，任何一个浏览器发送的消息另外的浏览器都能接收到。效果如图：
图片.png
项目代码已上传至GitHub：https://github.com/zhaozsh/Anonymous-chatroom
网友评论