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

文章首发于公众号【大数据学徒】，感兴趣请搜索 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 依赖： 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 的一种类型。 欢迎交流讨论，吐槽建议，分享收藏。 勤学似春起之苗，不见其增，日有所长 辍学如磨刀之石，不见其损，日有所亏 关注【大数据学徒】，用技术干货助你日有所长 大数据学徒

本文章由javascript技术分享原创和收集