springboot使用webscoket

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 {
    
    // 配置文件
    @Bean
    public 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<>();

    @OnOpen
    public 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) {
            }
        });
    }

    @OnMessage
    public 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;
    }

    @OnClose
    public 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 = message
        ws.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>