springboot搭建webSocket对话

本文介绍了如何在Java应用中使用WebSockets连接阿里云通义千问API,实现AI对话功能,并处理WebSocket连接管理。特别提到需在Shiro配置中排除/webSocket路径的权限拦截。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

现在AI工具这么火自己也整一个AI对话框,需要用到webSocket
如何接入ai组件可参考java对接阿里云通义千问API多轮对话承接上下文
1.maven添加jar包

<dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

2.创建WebSocketConfig

package com.ruoyi.web.controller.app;

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();
    }
}

3.创建WebSocketServer

package com.ruoyi.web.controller.app;

import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

import javax.websocket.OnClose;
import javax.websocket.OnError;
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.JSONObject;

@Component
@ServerEndpoint("/webSocket/{username}")
public class WebSocketServer {
    /**
     * 该map用来存放每个用户对应的Session对象。
     */
    private static Map<String, Session> clients = new ConcurrentHashMap<>();

    
    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(@PathParam("username") String username, Session session) throws IOException {
        if (username == null) {
            return;
        }
        clients.put(username, session);
        System.out.println("用户:" + username + "连接到websocke");
    }
    
    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose(@PathParam("username") String username) throws IOException {
        clients.remove(username);
        System.out.println("用户:" + username + "断开websocket");
    }

    @OnMessage
    public void onMessage(String json) throws IOException {
        System.out.println("前端发送的信息为:" + json);
        JSONObject jsonObject = JSONObject.parseObject(json);
        String user = jsonObject.getString("user");
        String msg = jsonObject.getString("msg");
        Session session = clients.get(user);
        //如果这个好友在线就直接发给他
        if (session != null) {
            sendMessageTo(msg,session);
        } else {
            System.out.println("对方不在线,对方名字为:" + user);
        }
    }
    
    /**
     * 出现异常触发的方法
     */
    @OnError
    public void onError(Session session, Throwable error) {
        error.printStackTrace();
    }

    /**
     * 单发给某人
     */
    public void sendMessageTo(String message, Session session) throws IOException {
        session.getBasicRemote().sendText(message);
    }
}

4.开始测试
代码写完后启动springboot开始测试
使用ApiPost工具进行测试
ws://localhost:80/webSocket/张三
用户张三链接到webSocket服务
张三向李四发送json数据{“msg”:“天王盖地虎。”,“user”:“李四”}
在这里插入图片描述
ws://localhost:80/webSocket/李四
李四也链接webSocket服务
这里可以看到接收的数据
并回复{“msg”:“小鸡炖蘑菇。”,“user”:“张三”}给张三
在这里插入图片描述
张三这边也对上了暗号对话完成。
在这里插入图片描述
20240407今天试了下一直报错
在这里插入图片描述
搞了半天发现是ruoyi里面的Shiro过滤器配置拦截了妈蛋
ShiroConfig中加上下面这一段

// 不需要拦截的访问
filterChainDefinitionMap.put("/webSocket/**", "anon,captchaValidate");

在这里插入图片描述

### Vue3与Spring Boot实现WebSocket示例教程 #### 一、引入依赖 为了使项目支持WebSocket,在`pom.xml`文件中添加`sprig-boot-starter-websocket`依赖[^2]。 ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> ``` #### 二、WebSocket配置类编写 创建一个新的Java配置类,用于设置WebSocket的相关参数以及定义消息代理。通过此类可以指定哪些路径允许建立WebSocket连接,并注册特定的消息处理器来监听来自客户端的信息[^1]。 ```java @Configuration @EnableWebSocketMessageBroker public class WebSocketConfig implements WebSocketMessageBrokerConfigurer { @Override public void configureMessageBroker(MessageBrokerRegistry config) { config.enableSimpleBroker("/topic"); config.setApplicationDestinationPrefixes("/app"); } @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/ws").withSockJS(); } } ``` 此段代码实现了两个主要的功能:一是启用了简单内存中的消息代理以转发带有前缀"/topic/"的目标;二是设置了应用程序目的地的前缀为"/app"。另外还开放了一个名为“/ws”的STOMP端点供前端页面连接使用[^4]。 #### 三、控制器层处理逻辑 接下来需要在Controller里边写一些方法用来接收从前台传来的信息并广播给其他在线用户。这里假设有一个叫ChatController.java 的控制类负责管理聊天室内的对话交流活动: ```java @Controller public class ChatController { private final SimpMessagingTemplate template; @Autowired public ChatController(SimpMessagingTemplate template){ this.template = template; } @MessageMapping("/sendMessage") public void sendMessage(@Payload String message,@Header("simpSessionId")String sessionId){ System.out.println(sessionId); // 发送消息到/topic/public主题下所有的订阅者那里去 template.convertAndSend("/topic/messages",message); } } ``` 上述代码片段展示了当接收到一条新的聊天记录时怎样将其分发至所有已订阅对应频道(即“/topic/messages”)下的参与者手中。同时利用SimpMessagingTemplate工具向目标位置推送更新通知。 #### 四、Vue组件交互设计 最后一步是在Vite驱动下的Vue3单页应用内完成UI界面搭建工作。下面给出一段简化版HTML模板配合JavaScript脚本来展示如何初始化Socket.IO实例并与后台保持持续性的双向通讯联系[^3]。 ```html <!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Real-Time Chat App</title> <script src="/path/to/socket.io.js"></script><!-- 引入sockjs库 --> </head> <body> <div id="app"> <input v-model="msgText"/><button @click="sendMsg()">发送</button><br/> <ul> <li v-for="(item,index) in msgs">{{ item }}</li> </ul> </div> <script type="module"> import { createApp } from 'https://unpkg.com/vue@next'; const app=createApp({ data(){ return{ msgs:[], msgText:'' }; }, methods:{ async sendMsg(){ let socket=new SockJS('/ws'); stompClient=await Stomp.over(socket).connect({},frame=>{ console.log('Connected:'+frame); // 订阅消息队列 this.subscribeToTopic(stompClient); }); stompClient.send("/app/sendMessage",{body:this.msgText},{}); }, subscribeToTopic(client){ client.subscribe('/topic/messages',response=>{ this.msgs.push(JSON.parse(response.body)); }); } } }).mount('#app'); </script> </body> </html> ``` 这段代码首先加载了必要的外部资源,接着声明了一个小型的应用程序状态对象包含待发送的文字内容和历史聊天列表两项属性。之后定义了一系列辅助函数用作触发事件响应机制的核心部分——比如点击按钮后调用`sendMsg()`尝试提交当前输入框里的文字作为新消息发布出去;而每当成功连上服务器以后便会立即执行一次`subscribeToTopic()`动作从而确保能够及时获取最新的群聊动态变化情况[^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值