如何使用 WebSocket + Jackson 在前后端之间交换 JSON 数据

文章首发于公众号【大数据学徒】，感兴趣请搜索 dashujuxuetu 或者文末扫码关注。

我正在用 Jetty 开发自己的一个玩具项目，在这个项目中，涉及到使用 WebSocket 在前后端之间交换 JSON 数据，本文对此做一个总结。

内容提要：

1. 环境说明
2. 浏览器向服务器发送 JSON
3. 服务器向浏览器发送 JSON

---

代码已上传至 github：https://github.com/iamabug/sunny

1. 环境说明

JDK 版本：1.8

浏览器：Chrome

Jackson 版本：2.10.1

开发工具：IntelliJ IDEA + Maven 插件

需要添加 jackson 依赖：

    com.fasterxml.jackson.core
    jackson-databind
    2.10.1

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 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)
}

非常简洁，验证截图：

image

其中 KAFKA_MESSAGES 是 MESSAGE 的一种类型。

欢迎交流讨论，吐槽建议，分享收藏。

勤学似春起之苗，不见其增，日有所长
辍学如磨刀之石，不见其损，日有所亏
关注【大数据学徒】，用技术干货助你日有所长

大数据学徒