WebSocket的核心事件

2022-11-02 16:30:19 浏览数 (3)

前言

在上一篇文章中：Spring Boot使用WebSocket模拟聊天 已经简单实现了我们WebSocket的Demo，里面使用的WebSocket事件函数在此做一个总结。

WebSocket整体通讯的流程就是 建立链接->发送消息->关闭链接/终止链接，这几步需要的事件Api主要就是以下几个

建立连接

代码语言：javascript复制
当在客户端和服务器建立连接时，就会从`WebSocket`实例触发open事件。可以认为onopen是客户端和服务器之间的初始握手。

客户端代码

客户端通过new WebSocket指定WebSocket ServerEndpoint地址就可以与服务器建立连接

代码语言：javascript复制
new WebSocket("ws://127.0.0.1:8080/api/websocket");

服务端代码

服务端则需要@OnOpen注解标明建立连接时触发的方法和业务逻辑

代码语言：javascript复制
@OnOpen
public void onOpen(Session session){
    log.info("客户端建立连接,Id为:{}",session.getId());
}

客户端回调

在连接建立成功后需要通知客户端连接已经建立成功，这一步操作WebSocket提供了onopen事件来进行客户端连接成功的回调操作，代码如下：

代码语言：javascript复制
websocket.onopen = function() {
    console.log("WebSocket连接成功");
}

发送接收消息

代码语言：javascript复制
WebSocket是双工通信，允许服务端主动发送消息到客户端，所以发送接收消息是双向的，他们的接受和发送消息的方式却各有不同

客户端发送消息

建立连接后客户端主动发送消息到服务端是通过send事件，客户端可以发送的信息包括纯文本消息，二进制数据或图像。

代码语言：javascript复制
websocket.send(message);

服务端接受消息

在建立连接后无论客户端何时发送消息服务端都会触发OnMessage事件来接收消息数据，在Java中是通过 @OnMessage注解标明触发的方法的。

代码语言：javascript复制
@OnMessage
public void onMessage(String message,Session session){
    log.info("客户端:{},接受到消息:{}",session.getId(),message);
}

服务端发送消息

既然是双工通信服务端自然也可以给客户端发生消息，但发送消息是个主动的操作，并且还要知道发生给那个客户端，所以服务端发送消息不是用的注解方式，是通过WebSocket的Session类的两个方法

  • getAsyncRemote
  • getBasicRemote

两种的区别就是同步跟异步的消息发送方式，可以根据具体情况选择使用，发送的消息类型则有五种

  • sendText()： 此方法发送的消息是String类型，支持部分消息发送，通过boolean值操控
  • sendBinary()：此方法发送的消息是ByteBuffer类型，支持部分消息发送，通过boolean值操控
  • sendObject()：此方法发送的消息类型是Object类型
  • sendPing()：此方法发送的消息是ByteBuffer类型，ping是请求消息 没有特定类 byte buffer
  • sendPong()：此方法发送的消息是ByteBuffer类型，pong是响应消息 它也可以用作单向心跳消息

注意：

  • sendPing和sendPong的字节数据不能大于125bytes。只能用来检测状态，不应用与业务数据传输。
  • Ping消息只能发送（不能接收）而Pong可以发送和接收
  • Ping的消息不需要写逻辑来明确地返回去响应一个ping - Java WebSocket API的实现会为你自动的处理

在业务上发送消息最常用的还是sendText与sendBinary，代码如下：

代码语言：javascript复制
public void send(Session session, String msg) throws IOException {
    session.getBasicRemote().sendText(msg);
}

客户端接受消息

客户端接受消息也是onMessage事件，通过websocket.onmessage，代码如下：

代码语言：javascript复制
websocket.onmessage = function (event){
    alert(event);
}

查看服务端推送的消息内容，data就是返回的消息体

关闭链接

关闭连接的操作服务端和客户端都可以操作，客户端可以通过用户退出窗口/系统或者主动调用close事件等方式来关闭连接。

客户端关闭连接

当客户端建立WebSocket连接后退出客户端页面则会自动触发服务端的OnClose事件，效果如下图

也可以通过websocket.close()事件进行主动退出。

服务端监听关闭连接

在关闭连接后通常会有些后续业务需要处理，所以服务端要通过监听连接关闭事件来进行相应业务的后续处理，这个监听事件的实现就是@OnClose注解，代码如下：

代码语言：javascript复制
@OnClose
public void onClose(Session session){
    log.info("客户端断开连接,Id为:{}",session.getId());
}

客户端监听关闭连接

跟服务端的一样，客户端监听关闭连接也是通过onclose事件，服务端关闭也会触发客户端的onclose事件，代码如下

代码语言：javascript复制
websocket.onclose = function() {
    alert("WebSocket连接关闭");
}

注意：如果是客户端主动触发close事件关闭连接会进行onclose事件的触发，直接关闭窗口则不会触发onclose的事件，如果想要窗口关闭也执行onclose事件的后续处理就加上监听窗口关闭事件的函数，代码如下：

代码语言：javascript复制
window.onbeforeunload = function() {
    alert("WebSocket连接关闭");
}

连接异常

连接异常在WebSocket中是onerror事件，用来处理连接出现异常的情况下的业务通知

客户端代码

客户端通过websocket.onerror事件来监听连接出现异常的通知，代码如下：

代码语言：javascript复制
websocket.onerror = function (event){
    console.log(event)
}

注意：不是所以的异常都有event，所以在onerror的事件下要校验event的内容

服务端代码

服务端通过@OnError注解监听连接异常时通知，并且必须带有Throwable类，代码如下：

代码语言：javascript复制
@OnError
public void onError(Session session, Throwable error){
    log.info("客户端发生异常,Id为:{}",session.getId());
}

总结

不管客户端还是服务端WebSocket的核心事件分为两类，一类是监听事件、一类是触发事件

监听事件

监听事件主要就是以下四类，在服务端跟客户端都通用

  • onOpen：监听连接建立的消息
  • onMessage：监听双端发送的消息
  • onClose：监听连接断开的消息
  • onError：监听异常发生的消息

触发事件

触发事件主要就是发送消息跟断开连接需要触发，也是客户端跟服务端都通用

  • send：主动发送消息的事件
  • close：主动关闭连接的事件
socket web websocket 服务端 事件

0 人点赞