文章首发于公众号【大数据学徒】，感兴趣请搜索 dashujuxuetu 或者文末扫码关注。
我正在用 Jetty 开发自己的一个玩具项目，在这个项目中，涉及到使用 WebSocket 在前后端之间交换 JSON 数据，本文对此做一个总结。
内容提要：
- 环境说明
- 浏览器向服务器发送 JSON
- 服务器向浏览器发送 JSON
代码已上传至 github：https://github.com/iamabug/sunny
1. 环境说明
JDK 版本：1.8
浏览器：Chrome
Jackson 版本：2.10.1
开发工具：IntelliJ IDEA + Maven 插件
需要添加 jackson 依赖：
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.10.1</version>
</dependency>
2. 浏览器向服务器发送 JSON
分两步：浏览器发送数据和服务器接收数据。
浏览器发送
JavaScript 代码如下：
var ws = new WebSocket("ws://localhost:12345/ws/kafka/dummy")
msg = {
"type": "...",
"data": {
...
}
}
ws.onopen = function(e) {
ws.send(JSON.stringify(msg))
}
可以看到，这里使用了 WebSocket 来发送数据，msg 是需要发送的数据，里面包含了 type 和 data 两个字段，在发送之前只需要调用一下 JSON.stringify() 即可。
服务器接收
在服务器端定义了 Message 类来接收数据，Message 类的部门定义如下：
public class Message {
public enum type {
...
}
public TYPE type;
public Map<String, Object> data = new HashMap<>();
public Message put(String k, Object v) {
data.put(k, v);
return this;
}
// 省略 getter 和 setter 方法
// 注意：空构造函数不可省略
public Message() {}
}
注意，如果没有空构造函数，会报如下异常：
com.fasterxml.jackson.databind.exc.InvalidDefinitionException: Cannot construct instance of `iamabug.common.Message` (no Creators, like default construct, exist): cannot deserialize from Object value (no delegate- or property-based Creator)
at [Source: (String)"{"type":"ERROR_INFO","data":null}"; line: 1, column: 2]
在处理 onWebSocketText(String message) 方法内对消息进行反序列化：
// 序列化和发序列化都通过 ObjectMapper 来实现
Message msg = new ObjectMapper().readValue(message, Message.class);
这样 msg 变量中存储的就是前端发送来的数据。
3. 服务器向浏览器发送 JSON
也分为两步：服务器发送数据和浏览器接收数据。
服务器发送
代码如下：
Message resp = new Message(Message.TYPE.KAFKA_MESSAGES);
resp.put("messages", List.of("first message", "second message"));
resp.put("total", 2);
client.sendString(new ObjectMapper().writeValueAsString(resp));
首先准备好要发送的数据 resp，然后调用 ObjectMapper 的 writeValueAsString() 方法实现序列化，最后调用 Jetty WebSocket 的客户端对象的 sendString() 方法将数据发送。
浏览器接收
代码如下：
// ws 是一个 WebSocket 对象
ws.onmessage = function(e) {
// 反序列化
resp = JSON.parse(e.data)
// 输出验证
alert(resp.type)
}
非常简洁，验证截图：
其中 KAFKA_MESSAGES 是 MESSAGE 的一种类型。
欢迎交流讨论，吐槽建议，分享收藏。
勤学似春起之苗，不见其增，日有所长
辍学如磨刀之石，不见其损，日有所亏
关注【大数据学徒】，用技术干货助你日有所长
