172. Spring Boot WebSocket: Coding Analysis

【Video & Communication Platform】

http://study.163.com/course/introduction.htm?courseId=1004329008&utm_campaign=commission&utm_source=400000000155061&utm_medium=share

à SpringCloud Video

http://study.163.com/course/introduction.htm?courseId=1004638001&utm_campaign=commission&utm_source=400000000155061&utm_medium=share

à Spring Boot source code

https://gitee.com/happyangellxq520/spring-boot

à Spring Boot communication platform

http://412887952-qq-com.iteye.com/blog/2321532

Foreword:

In the previous article, I talked about the principle of WebSocket . In this section, we will first analyze the coding briefly, which will help in the actual coding in the future.

illustrate:

(1) The Spring Boot version used in the coding is: 1.5.8 ;

(2) There are two ways to use WebSocket: the first way is to use socketJS, and the second way is to use the H5 standard. The second method is used in the example ;

(3) Finally provide the source code;

Code Analysis:

In the example, we need to write code on both ends: the server and the client (of course the code is in one project).

( 1 ) Client : Client description

The client-side code is mainly implemented using H5 's WebSocket , and the front-end web page uses WebSocket to connect to the server, and then establishes a Socket connection for communication.

( 2 ) Server : Server description

The server is mainly to establish the relationship of multiple clients, to transfer messages, etc. After the client successfully connects to the server, it can send messages to the server through the established channel. After the server receives the message, it sends it to all clients in a group.

( 3 ) How to connect the client and the server?

The client connects to the server through the WebSocket object in JS :

var websocket = new WebSocket("ws://localhost:8080/websocket");

The server maps the /websocket endpoint used above, just use the annotation @ServerEndpoint :

@ServerEndpoint(value = "/websocket")

当客服端有连接请求了，服务端怎么接收请求，使用注解@OnOpen即可：

@OnOpen
public void onOpen(Session session) {
        this.session = session;
 }

（4）客户端和服务端怎么发送消息？

客户端可以使用webSocket提供的send()方法，如下代码：

//获取输入的文本信息进行发送

var message = document.getElementById('text').value;
websocket.send(message);

服务端怎么发送消息呢？主要是使用在成功建立连接的时候，创建的Session对象进行发送，如下代码：

 session.getAsyncRemote().sendText("恭喜您成功连接上WebSocket");

（5）客户端和服务端怎么接收消息？

客户端接收消息消息使用的是websocket的onmessage回调方法，如下代码：

websocket.onmessage = function(event) {
           //文本信息直接显示，如果是json信息，需要转换下在显示.
       var data = event.data;
       document.getElementById('message').innerHTML += data;
}

服务端怎么接收到消息，使用注解@OnMessage，如下代码：

@OnMessage
public void onMessage(String message, Session session) {
        System.out.println("来自客户端的消息:" + message);
}

（6）客户端和服务端关闭连接处理？

客户端使用websocket.close()进行关闭连接；

服务端使用@OnClose注解监听客户端的关闭动作。

（7）客户端和服务端异常处理？

客户端当有异常信息的时候会回调方法：websocket.onerror；

服务端使用@OnError注解监听异常信息。

（8）群聊原理（群发消息）

服务端在和客户端建立连接的时候，会创建一个webSocket对象，我们会将每个连接创建的对象进行报错到一个列表中，比如：CopyOnWriteArraySet（这是线程安全的）；在要进行群发的时候，编写我们的列表对象进行群发消息。

（9）单聊原理（一对一消息）

单聊的时候，就无需遍历列表，而是需要知道发送者和接受者各自的Session对象，这个Session对象怎么获取呢？Session可以获取到sessionId，发送者在发送消息的时候，携带接收消息的sessionId，那么问题就演变成了：发送者怎么知道接受者的sessionId，那就是加入一个在线用户列表即可，在线用户列表中有用户的基本信息，包括sessionId。

明白了这些，在接下里的编码中就会轻松很多。

172. Spring Boot WebSocket: Coding Analysis

Guess you like