ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
案例代码:https://gitee.com/flymini/example-codes/tree/master/WebSocket_/com-learn-websocket04 **** 实现客户端向后端发送数据,然后后端将数据推送到前端。 <br/> 步骤如下: **1. 创建一个 SpringBoot 项目** ```xml <!-- 引入 websocket 依赖 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> ``` **2. 编写扫描注解`@ServerEndpoint`的配置类** ```java @Configuration public class WebSocketConfig { /** * 扫描标注了注解 @ServerEndpoint 的类,让被标注的类成为 WebSocket 的服务类 */ @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } } ``` **3. 编写 WebSocket 服务类** ```java /** * value:当前 WebSocket 服务的访问地址 */ @Component @ServerEndpoint(value = "/v1/endpoint") public class EndPointController { /** * 连接建立时被调用。 */ @OnOpen public void onOpen(Session session, EndpointConfig config) { System.out.println("连接已经建立."); } /** * 收到消息时被调用。 * @param message 前端传递过来的消息。 * @param session */ @OnMessage public void onMessage(String message, Session session) throws IOException { System.out.println("收到了消息:" + message); //将消息推送到前端 session.getBasicRemote().sendText("谢谢,我收到了你的消息:" + message); } /** * 连接关闭时被调用. * * @param session * @param reason 关闭的理由 */ @OnClose public void onClose(Session session, CloseReason reason) { System.out.println("连接已关闭,关闭理由:" + reason); } /** * 当连接发生异常时被调用 * * @param session * @param e */ @OnError public void onError(Session session, Throwable e) { System.out.println("连接发生异常:" + e.getMessage()); e.printStackTrace(); } } ``` **4. 前端程序** ```js var sock = null /** * 建立连接 */ function connect() { sock = new WebSocket('ws://localhost:8090/v1/endpoint') //当接收到服务端推送过来的消息时被触发 sock.onmessage = (e) => { console.log(e.data) } } /** * 发送数据到服务端 */ function send() { sock.send('Hello World!') } /** * 关闭当前用户与WebSocket的连接 */ function close() { sock.close(3000, "我想关闭连接!") } ```