WebSocket的简单使用

前言

WebSocket是什么呢？简单来说这是一个实现双向通信的技术，可在客户端与服务端建立一个长连接，与HTTP不同，WebSocket允许服务器主动发送信息给客户端，实现了真正的双向通信。可用于实现实时聊天应用等需要客户端与服务端双向通信的场景。下面我们简单使用一下这个技术，做一个简单的案例。

准备环境

1、初始化一个前端项目（vue3）
2、初始化一个后端项目（springboot2）

预计实现效果

当我们点击和服务器建立连接时，建立与服务器建立长连接，并让服务器发送一条消息给浏览器并显示在页面上。当在输入框输入信息点击发送时，向服务器发送消息。

实践

前端

初始化一个vue项目，在HelloWorld.vue中粘贴一下代码

<template>
  测试websocket
  <button @click="doConnection">点击和服务端建立链接</button>
  <br>
  <br>
  <br>
  <br>
  <input v-model="message"/><button @click="sendMessage">发送消息</button>
  <p style="background:#4c8f18;">{{ serviceMessage?serviceMessage:"服务器无消息发来" }}</p>
</template>
<script setup lang="ts">
//来自服务器的消息
import {ref} from "vue";

const serviceMessage = ref("")
//发个服务器的消息
const message = ref("")
const doConnection=()=>{
  alert("建立链接")
  webSocketInit();
}
//发送消息
const sendMessage=()=>{
  if(message.value.length!==0){
    webSocketObject.send(message.value)
  }
}
//建立连接websocket
let webSocketObject=null;
const websocketUrl = `ws://localhost:8080/websocket/1`
const webSocketOnOpen = (e) => {
  console.log("连接成功");
}
const webSocketOnMessage = (e) => {
  console.log('来自服务端的消息->', e.data)
  serviceMessage.value = e.data
}
const webSocketOnError = (e) => {
  console.log('与服务端连接异常->', e)
}
const webSocketOnClose = (e) => {
  console.log('与服务端连接关闭->', e)
}
const webSocketInit = () => {
  webSocketObject = new WebSocket(websocketUrl);
  webSocketObject.onopen = webSocketOnOpen
  webSocketObject.onmessage = webSocketOnMessage
  webSocketObject.onerror = webSocketOnError
  webSocketObject.onclose = webSocketOnClose
}
</script>

<style scoped>
.read-the-docs {
  color: #888;
}
button{
  border: 1px solid #747bff;
}
</style>

后端

1、初始化一个springboot项目（后端代码）
2、实际目录

需要添加的代码
config文件夹中的WebSocketConfig

WebSocketConfig
package com.example.demo.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * Created with IntelliJ IDEA.
 *
 * @Auther: 赖志军
 * @Date: 2021/05/31/16:14
 * @Description: WebSocket配置类开启
 */
@Configuration
@EnableWebSocket
public class WebSocketConfig {

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

}

webscoket文件夹中的WebSocketServer

package com.example.demo.webscoket;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
@Slf4j
@Component
@ServerEndpoint("/websocket/{param}")
public class WebSocketServer {
    /**
     * 当前在线客户端集合（线程安全的）：以键值对方式存储，
     * key是连接的编号(可以是能够代表用户身份的唯一凭证)，可以通过这个key找到对应客户端和服务端链接，也就是session
     * value是连接的对象session长连接
     */
    private static Map<String, Session> onlineClientMap = new ConcurrentHashMap<>();
    // 建立连接时触发，可以把长连接存储在一个静态map中
    @OnOpen
    public void onOpen(Session session, @PathParam("param") String param){
        onlineClientMap.put(param, session);//添加当前连接的session,一个用户对应一个session
        log.info("连接成功，当前用户{}",param);
        //建立连接后给浏览器发送消息
        sendMessage("我是来自服务器的消息","1");
    }
    //关闭时触发
    @OnClose
    public void onClose(Session session, @PathParam("param") String param){
        onlineClientMap.remove(session.getId());//移除当前连接的session
    }
    //发生异常时触发
    @OnError
    public void onError(Throwable error, Session session, @PathParam("param") String param){
        error.printStackTrace();
    }
    //接收客户端（浏览器）的消息
    @OnMessage
    public void onMsg(Session session, String message, @PathParam("param") String param) throws IOException{
        log.info("收到浏览器的消息：{}",message);
    }

    //自定义给客户端（浏览器）发送消息,参数 message-消息||acceptId-接收者
    public void sendMessage(String message, String acceptId){
        Session session = onlineClientMap.get(acceptId);
        session.getAsyncRemote().sendText(message);
    }
}

效果

建立连接，服务器发送”我是来自服务器的消息“，显示在页面

输入消息，点击发送消息，服务器得到浏览器发送的消息

总结

这个例子只是简单的应用案例，在实践中我们可以在后端打开连接（@OnOpen），接收消息(@OnMessage)，自定义发送消息(sendMessage)根据实际需求添加逻辑。