Java WebSocket的使用（有代码案例）

什么是WebSocket

WebSocket是一种在Web开发中用于实现双向双向通信的协议。
它允许在客户端和服务器之间建立持久性的连接，使得数据可以在双方之间进行实时交换，而不需要客户端发起多个HTTP请求

WebSocket的特点：

1. 双向通信

webSocke允许客户端和服务器之间双向实时通信，客户端可以向服务器发送消息，服务器也可以向客户端发送消息。

2. 持久连接

webSocket连接是持久性的，一旦建立连接，他会保持打开状态，直到其中一方主动关闭连接

3. 低延迟

   webSocket使用单个TCP连接进行通信，相比多次HTTP请求-响应循环，具有更低的通信延迟

4. 轻量级

   webSocket协议相对简单，通信数据头部较小，减少了通信的额外开销

webSocket和HTTP的区别

1. 通信模式

HTTP是一种无状态的请求-响应协议，客户端向服务器发送请求，服务器处理请求并返回响应，然后连接立即关闭。每个请求都是独立的，不会保持连接状态
WebSocket允许在客户端和服务器之间建立持久性的双向连接，客户端和服务器可以通过这个连接实时的交换数据。客户端和服务器都可以同时发送和接收数据

2. 连接性

HTTP协议是基于请求-响应模式的，每次请求都需要客户端发起新的连接，并在收到响应后关闭
WebSocket允许客户端和服务器之间建立持久性连接，连接建立之后可以一直保持打开状态，直到其中一方主动关闭连接或者发生错误

3. 数据格式

HTTP协议通常用于传输文档、图像、视频等静态资源或者动态资源，数据格式通常是文本或者是二进制，但是在每次请求和响应中都需要携带HTTP的头部信息
webSocket协议支持传输文本或二进制数据，数据格式更加灵活，可以根据应用程序的需要自定义

4. 性能和效率

HTTP协议在每次请求-响应周期中都需要消耗额外的资源来建立和关闭连接，通信效率相对较低
webSocket通过在客户端和服务器之间建立持久连接，减少建立和关闭的开销，通信效率更高，延迟更低

webSocket的常用常见

在线聊天、股票行情、在线投票和调查，实时地图和位置等

怎么用WebSocket

前端（Vue）

<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-input v-model="form.message" type="text"></el-input>
      <el-button type="success" @click="send">发送消息</el-button>
      <el-button type="danger" @click="close">关闭连接</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      clientId: null,
      form: { message: "" },
      rules: {},
      path: null,
      socket: "",
    };
  },
  mounted() {
    //进行初始化操作
    this.init();
  },
  methods: {
    init() {
      //判断浏览器是否支持webSocket
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        //clientId是表示哪个客户端
        this.clientId = Math.random().toString(36).substring(2);
        console.log("clientId", this.clientId);
        //初始化webSocket的地址
        this.path = "ws://127.0.0.1:9140/ws/" + this.clientId;
        //创建webSocket对象
        this.socket = new WebSocket(this.path);
        this.socket.onopen = this.open();
        this.socket.onerror = this.error();
        this.socket.onmessage = this.getMessage();
      }
    },

    open() {
      console.log("socket连接成功");
    },
    error() {
      console.log("socket连接错误");
    },
    getMessage() {
      console.log(this.form.message);
    },
    close() {
      console.log("socket已经关闭");
    },
    send() {
      this.socket.send(this.form.message);
    },
  },
  destroyed() {
    //销毁监听
    this.socket.onclose = this.close;
  },
};
</script>
<style scoped>
</style>

后端（Java）

1. 添加依赖（自己选择版本，我用的版本是这个）

    <!--websocket-->
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-websocket</artifactId>
      <version>2.1.8.RELEASE</version>
    </dependency>

2. 创建注册WebSocket的服务组件

/**
 * 注册web Socket的服务组件
 */
@Configuration
public class WebSocketConfiguration {


    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }
}

3. 通信服务

/**
 *  导入web Socket服务端组件web Socket Server用于和客户端通信
 */
@Component
@ServerEndpoint("/ws/{clientId}")
public class WebSocketServer {

    private static Map<String, Session> sessionMap = new HashMap<>();


    @OnOpen
    public void opOpen(Session session, @PathParam("clientId") String clientId) {
        System.err.println("客户端：" + clientId + "建立连结");
        sessionMap.put(clientId, session);
    }

    @OnClose
    public void onClose(@PathParam("clientId") String clientId) {
        sessionMap.remove(clientId);
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message  客户端发送过来的消息
     * @param clientId
     */
    @OnMessage
    public void onMessage(String message, @PathParam("clientId") String clientId) {
        System.err.println("收到来自客户端" + clientId + "的消息：" + message);
    }


    public void sendToAllClient(String message) {
        Collection<Session> sessions = sessionMap.values();
        for (Session session : sessions
        ) {
            try {
                session.getBasicRemote().sendText(message);
            } catch (Exception e) {
                e.printStackTrace();
            }

        }
    }


}

4. 服务端定时发送消息

注意如果用了定时器需要在启动类加上@EnableScheduling注解，否则定时任务不生效

@Component
public class WebSocketTask {

    @Autowired
    private WebSocketServer webSocketServer;


    /**
     * 通过WebSocket每隔5秒向客户端发送消息
     */
    @Scheduled(cron = "0/5 * * * * ?")
    public void sendMessageToClient(){
        System.err.println(LocalDateTime.now());
        webSocketServer.sendToAllClient("这是来自服务端的消息:"+ DateTimeFormatter.ofPattern("HH:mm:ss").format(LocalDateTime.now()));
    }
}