springboot添加config配置项

package cn.lsy.api.yuy.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;@Configuration
public class WebSocketConfig {// 配置文件@Beanpublic ServerEndpointExporter serverEndpointExporter(){return new ServerEndpointExporter();}}

springboot websocket主类

package cn.lsy.api.yuy.controller;import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.HashSet;
import java.util.List;
import java.util.Map;
import java.util.Set;import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import org.springframework.stereotype.Component;import com.alibaba.fastjson.JSON;import cn.lsy.api.yuy.entity.Message;@Component
@ServerEndpoint("/chat/{id}")
public class Websocket {private static final Map<String, Session> onLineList = new HashMap<>();@OnOpenpublic void OnOpen(Session session, @PathParam("id") String id) {// 用户上线onLineList.put(id, session);// 群发所有人有人上线更新上线列表onLineList.forEach((key, value) -> {try {value.getBasicRemote().sendText(JSON.toJSONString(getOnLine()));} catch (IOException e) {}});}@OnMessagepublic void onmessage(Session session, String message, @PathParam("id") String id) {Message message2 = JSON.parseObject(message,Message.class);// 群发所有人onLineList.forEach((key, value) -> {try {value.getBasicRemote().sendText(message2.getContent());} catch (IOException e) {System.out.println(e);}});}public Message getOnLine(){ArrayList<String> arrayList = new ArrayList<>();Message message = new Message();onLineList.forEach((key, value) -> {arrayList.add(key);});message.setOnLinSet(arrayList);message.setType("3");return message;}@OnClosepublic void onclose(Session session, @PathParam("id") String id) {onLineList.remove(id);// 群发所有人有人下线更新在线列表onLineList.forEach((key, value) -> {try {value.getBasicRemote().sendText(JSON.toJSONString(getOnLine()));} catch (IOException e) {// TODO: handle exception}});}}

springboot消息实体类

package cn.lsy.api.yuy.entity;import java.util.List;import lombok.Data;@Data
public class Message {public String type;public String content;public Integer fromId;public Integer toId;public List onLinSet;}

vue

<template><div><div><label for="user">用户名：</label>  <input name="user" type="text"  v-model="name"><button @click="createWebSocket">加入</button></div><div><label>消息内容：</label><textarea v-model="content"></textarea><button @click="sendMessage">发送</button></div><div>当前在线列表<div v-for="(item,index) in onLineInfo" :key="index">{{ item }}</div><input type="radio"></div><div class="messageBox"><div class="q">群聊<div>123</div></div><div class="d">单聊<div>123</div></div></div></div>
</template><script setup>
import { onMounted,ref,reactive} from 'vue';
const name = ref(null);
const content = ref(null);
const toId = ref(null)
const onLineInfo = ref(null)
let ws;// 建立连接
function createWebSocket(){if(name.value!="" && name.value!=null){ws = new WebSocket(`ws://localhost:8080/chat/${name.value}`)ws.onmessage = messagews.onopen = open}else{alert("用户名不能为空")}}
function onMessage(e){console.log(e)
}
function message(e){console.log("message",JSON.parse(e.data))const message = JSON.parse(e.data)if(message.type === "3"){onLineInfo.value = message.onLinSet}
}
function open(e){console.log("open",e)
}
const sendMessage = ()=>{let message = {type:1,fromId:name.value,content:content.value,toId:toId.value}ws.send(JSON.stringify(message))
}</script><style>
.messageBox{display: flex;
}
.q,.d{width: 200px;text-align: center;
}
</style>