spring boot 项目 跟 JavaScript 简单 websocket 使用

于 2024-09-04 06:04:14 发布
阅读量750 收藏 6
点赞数 17
文章标签： javascript vue.js 前端 java spring boot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ling_zhi_xin/article/details/141877057
版权

文章目录

websocket 简绍

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

WebSocket 的优势包括：

全双工通信：允许服务器主动向客户端发送信息，同时也能够提供客户端到服务器的低延迟通信。
减少带宽消耗：一旦建立连接之后，通信开销很小，因为不需要HTTP头部。
创建更丰富的交互体验：实时更新数据的能力，使得应用能够更加流畅地响应用户的动作

可以通过 JavaScript 的 WebSocket 对象来创建一个 WebSocket 连接。

var ws = new WebSocket('ws://localhost:8080');

JavaScript 设置

处理事件

WebSocket 对象提供了几个事件处理器来处理连接的状态变化：
open：连接成功建立时触发。
message：接收到消息时触发。
error：发生错误时触发。
close：连接关闭时触发。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Example</title>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const socket = new WebSocket('ws://localhost:8080/websocket');

            socket.onopen = function (event) {
                console.log('WebSocket connection established.');
            };

            socket.onmessage = function (event) {
                console.log('Received from server:', event.data);
            };

            socket.onclose = function (event) {
                console.log('WebSocket connection closed.');
            };

            socket.onerror = function (error) {
                console.error('WebSocket error:', error);
            };

            function sendMessage() {
                let message = document.getElementById('message').value;
                socket.send(message);
                console.log('Sent message:', message);
            }
        });
    </script>
</head>
<body>
    <input type="text" id="message" placeholder="Type your message here">
    <button onclick="sendMessage()">Send Message</button>
</body>
</html>

确保你的服务器端已正确配置，并且能够接收来自客户端的连接请求。
使用HTTPS和WSS（加密的WebSocket）可以提高安全性，特别是在生产环境中。
如果你的服务器部署在不同的域上，请确保服务器配置允许跨域访问。

Java 服务端设置

导jar包

通过 maven 导入 spring boot 中 集成的 websocket jar 包

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
创建WebSocket端点
@EnableWebSocket

@EnableWebSocket 是 Spring 框架中的一个注解，用于启用 WebSocket 支持。当一个类被标记为此注解时，Spring 会自动配置必要的组件来处理 WebSocket 请求。这个注解通常应用在一个配置类上，该类负责设置 WebSocket 的处理逻辑。

registerWebSocketHandlers
  • registerWebSocketHandlers 是 Spring WebSocket 框架中的一个重要方法，它用来注册 WebSocket 处理器（WebSocketHandler）。这个方法是 WebSocketConfigurer 接口中定义的一个抽象方法，需要在你的配置类中实现。通过这个方法，你可以指定哪些路径映射到特定的 WebSocket 处理器，并可以配置其他相关选项。
  • addHandler 方法：接受两个参数，一个是 WebSocketHandler 的实例，另一个是 WebSocket 终结点的 URL 映射。
  • setAllowedOrigins 方法：指定哪些源（域名）可以访问你的 WebSocket 终结点。如果设置为 “*”，则表示任何源都可以访问。
  • withSockJS 方法：这是一个可选的配置项，用于启用 SockJS，它是一种兼容性更好的 WebSocket 实现，能够在不支持原生 WebSocket 的浏览器上使用其他传输方式（如长轮询）。

接下来，定义一个WebSocket处理器类，并配置一个端点来接受WebSocket连接：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    private final WebSocketHandler webSocketHandler;

    public WebSocketConfig(WebSocketHandler webSocketHandler) {
        this.webSocketHandler = webSocketHandler;
    }

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(webSocketHandler, "/websocket").setAllowedOrigins("*");
    }
}

这里我们定义了一个WebSocket配置类，并注册了WebSocket处理器。/websocket 是WebSocket的端点路径。

实现WebSocket处理器
afterConnectionEstablished
void afterConnectionEstablished(WebSocketSession session) throws Exception;
  • afterConnectionEstablished 是 WebSocketHandler 接口中定义的一个方法，它会在 WebSocket 连接成功建立之后被调用。这个方法为你提供了一个机会来执行一些初始化操作，例如记录连接信息、将连接加入到一个管理连接的集合中，或者发送初始消息给客户端。
  • WebSocketSession session —— 表示新建立的 WebSocket 会话。
  • Exception —— 如果处理过程中出现任何异常，可以抛出
afterConnectionClosed
void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception;
  • afterConnectionClosed 是 WebSocketHandler 接口中定义的一个方法，它会在 WebSocket 连接关闭时被调用。这个方法允许你在连接关闭后执行一些清理操作，例如从会话管理器中移除会话、记录关闭事件或者发送通知给其他客户端。
  • WebSocketSession session：表示已关闭的 WebSocket 会话。
  • CloseStatus status：表示关闭状态的原因。CloseStatus 是一个枚举类型，提供了标准的关闭码和关闭原因，例如 NORMAL_CLOSURE（正常关闭）、GOING_AWAY（离开）、PROTOCOL_ERROR（协议错误）等。
  • 抛出：Exception —— 如果处理过程中出现任何异常，可以抛出。
handleTextMessage
void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception;
  • handleTextMessage 是 WebSocketHandler 接口中定义的一个方法，用于处理从客户端接收到的文本消息。当客户端发送文本消息时，这个方法会被调用。对于二进制消息，则会调用 handleBinaryMessage 方法。
  • WebSocketSession session：表示当前的 WebSocket 会话。
  • TextMessage message：包含从客户端接收到的文本消息。
  • 抛出：Exception —— 如果处理过程中出现任何异常，可以抛出
    现在我们需要实现一个WebSocket处理器类来处理连接事件：
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

import java.util.concurrent.ConcurrentHashMap;

import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
import java.util.concurrent.ConcurrentHashMap;

public class WebSocketHandler extends TextWebSocketHandler {

    private static final ConcurrentHashMap<String, WebSocketSession> sessions = new ConcurrentHashMap<>();

    @Override
		public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        super.afterConnectionEstablished(session);
        String id = session.getId();
        sessions.put(id, session);
        System.out.println("WebSocket connection established with session ID: " + id);
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        super.afterConnectionClosed(session, status);
        String id = session.getId();
        sessions.remove(id);
        System.out.println("WebSocket connection closed with session ID: " + id);
    }

    public void sendMessageToSession(String sessionId, String message) {
        WebSocketSession session = sessions.get(sessionId);
        if (session != null && session.isOpen()) {
            try {
                session.sendMessage(new TextMessage(message));
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    public void broadcastMessage(String message) {
        for (WebSocketSession session : sessions.values()) {
            if (session.isOpen()) {
                try {
                    session.sendMessage(new TextMessage(message));
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
    }
}

现在我们可以使用WebSocketHandler类中的sendMessageToSession或broadcastMessage方法来发送数据给前端。
发送给特定会话：如果想要向特定的客户端发送消息，可以使用sendMessageToSession方法。你需要知道客户端的会话ID。

webSocketHandler.sendMessageToSession(sessionId, "Hello, client!");

广播消息：如果你想向所有已连接的客户端广播消息，可以使用broadcastMessage方法

webSocketHandler.broadcastMessage("Hello, everyone!")
注销WebSocket连接

要在Java后端注销WebSocket连接，可以通过调用 WebSocketHandler 类中的 removeSession 方法来实现。例如，你可以从HTTP请求或其他服务中调用此方法：

@GetMapping("/logout/{sessionId}")
public ResponseEntity<String> logout(@PathVariable String sessionId) {
    WebSocketHandler handler = new WebSocketHandler(); // 或者通过依赖注入获取
    handler.removeSession(sessionId);
    return ResponseEntity.ok("Session " + sessionId + " has been closed.");
}

自己定义一个 固定id 方便使用

  • 前端 JavaScript 代码
    • 创建WebSocket连接：在DOM加载完成后，创建一个WebSocket连接。
    • 发送握手消息：在连接建立后，发送一个包含固定ID的握手消息。
    • 处理接收到的消息：设置消息接收处理函数，用于接收后端发送的数据。
  • 后端 Java 代码
    • 配置WebSocket处理器：配置WebSocket处理器，注册WebSocket路径。
    • 处理握手消息：接收前端发送的握手消息，并根据消息内容保存客户端ID与WebSocket会话的映射。
    • 发送消息：提供方法根据客户端ID发送消息。

前端 javascript

<!DOCTYPE html>
<html l	ang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Client Example</title>
</head>
<body>
    <input type="text" id="messageInput" placeholder="Enter your message here">
    <button id="sendButton">Send Message</button>
    <div id="log"></div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const socket = new WebSocket('ws://example.com/websocket');

            socket.onopen = function (event) {
                console.log('WebSocket connection established.');

                // 固定的客户端ID
                const clientId = 'client-123';

                // 发送握手消息
                socket.send(JSON.stringify({
                    type: 'handshake',
                    clientId: clientId,
                    message: 'Hello, server!'
                }));
            };

            socket.onmessage = function (event) {
                console.log('Received from server:', event.data);
                document.getElementById('log').textContent += 'Received from server: ' + event.data + '\n';
            };

            socket.onclose = function (event) {
                console.log('WebSocket connection closed.');
                document.getElementById('log').textContent += 'WebSocket connection closed.\n';
            };

            socket.onerror = function (error) {
                console.error('WebSocket error:', error);
                document.getElementById('log').textContent += 'WebSocket error: ' + error + '\n';
            };

            document.getElementById('sendButton').addEventListener('click', function () {
                let message = document.getElementById('messageInput').value;
                if (socket.readyState === WebSocket.OPEN) {
                    socket.send(message);
                    document.getElementById('log').textContent += 'Sent message: ' + message + '\n';
                } else {
                    alert('WebSocket connection is not open.');
                }
            });
        });
    </script>
</body>
</html>

java 服务器端配置

import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

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

public class WebSocketHandler extends TextWebSocketHandler {

    private static final Map<String, WebSocketSession> clientSessions = new ConcurrentHashMap<>();
    private static final ObjectMapper objectMapper = new ObjectMapper();

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        super.afterConnectionEstablished(session);
        String sessionId = session.getId();
        System.out.println("WebSocket connection established with session ID: " + sessionId);
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        String payload = message.getPayload();
        HandshakeMessage handshakeMessage = objectMapper.readValue(payload, HandshakeMessage.class);

        if ("handshake".equals(handshakeMessage.getType())) {
            String clientId = handshakeMessage.getClientId();
            String sessionId = session.getId();

            // 存储clientId与sessionId的映射关系
            clientSessions.put(clientId, session);

            // 可以选择回复客户端确认握手成功的消息
            session.sendMessage(new TextMessage("Handshake successful"));
        }
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        super.afterConnectionClosed(session, status);
        String sessionId = session.getId();
        System.out.println("WebSocket connection closed with session ID: " + sessionId);

        // 移除会话
        clientSessions.values().removeIf(s -> s.getId().equals(sessionId));
    }

    public void sendMessageToClient(String clientId, String message) {
        WebSocketSession session = clientSessions.get(clientId);
        if (session != null && session.isOpen()) {
            try {
                session.sendMessage(new TextMessage(message));
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    // 定义握手消息模型
    private static class HandshakeMessage {
        private String type;
        private String clientId;
        private String message;

        // Getters and setters
    }
}
心之语歌
关注
  • 17
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
spring boot websocket 的使用
张小三的博客
07-18 2833
/如果spingboot配置文件中中配置了server.servlet.context-path，则格式为ws//ip接口启动的端口/server.servlet.context-path的名称/webSocketDemo。//连接到WebSocket的url地址。格式为ws//ip接口启动的端口/webSocketDemo。//连接发生错误的回调方法。//连接成功建立的回调方法。//ws连接断开的回调方法。//接收到消息的回调方法。//将消息显示在网页上。...
Spring-Boot-Jetty-WebSocket-Example:如何使用Spring Boot配置Jetty WebSocket的基本示例
05-18
在本文中，我们将深入探讨如何使用Spring Boot与Jetty服务器集成来实现WebSocket通信。WebSocket是一种在客户端和服务器之间建立持久连接的协议，允许双向实时数据传输。Spring Boot简化了Java应用的开发，包括...
spring boot和javascript中websocket使用方式
luck_lin
03-22 253
spring boot中websocket使用方式
Spring Boot下websocket简单示例
这个需求，做不了
02-09 1898
前言 本文基于Spring对websocket的集成来实现websocket的简单入门。本文以及后续文章相关技术如下 sockjs webstomp-client Spring官网的websocket文档 Spring Boot等 引入websocket依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId&gt
Spring Boot 使用 WebSocket示例
allway2的博客
02-01 1863
Introduction to WebSocket with Spring Boot | SpringHowhttps://springhow.com/spring-boot-websocket/ 让我们看看如何将 WebSocket 支持添加到 Spring Boot 应用程序中。我们将尝试创建一个简单的聊天应用程序。请注意，此实现不使用 STOMP。 什么是 WebSocket？ WebSocket 协议有助于通过单个 TCP 连接在客户端和服务器之间建立全双工双向通信。该协议与 HTTP 不同，
Spring Boot项目中使用WebSocket消息代理功能
qq_42572322的博客
08-13 449
然后在任意页面发送消息，其他浏览器都会接收并且显示出来，包括发送方的页面也会显示。因为大家都订阅了/topic/messages频道。是 Spring Framework 中的一个类，它提供了向 WebSocket 客户端发送消息的多种方法。当然你也可以不适用@SendTo注解来向订阅地址发送消息。方法会返回一个格式化的响应消息，该消息会被发送到。这样你打开html页面，可以多开几个浏览器。方法会被调用，并将消息传递给。
Spring Boot笔记-WebSocket的使用
热门推荐
IT1995的博客
11-16 1万+
目录 程序运行 解析 源码下载 程序运行 如下，有3个WebSocket客户端。 输入名称后，后端如下： 前端填出发送input，填写并发送 点击发送后，另外2个都能收到 具体如下： 输入如下数据，让xiaoming只给xiaogang发送数据。 点击发送后 仅xiaogang接收； 关闭所有页面，看看后端打印： ...
【Java】Spring Boot整合WebSocket
微信公众号: 后端码匠
03-05 3357
WebSocket是一种协议，用于实现客户端和服务器之间的双向通信。它可以在单个TCP连接上提供全双工通信，避免了HTTP协议中的请求-响应模式，从而实现更高效的数据交换。WebSocket协议最初由HTML5规范提出，现在已成为一种通用的网络协议，被广泛用于Web应用程序中。WebSocket协议在Web应用程序中广泛使用，例如实现实时通信、在线游戏、即时消息等功能。
Spring Boot中集成WebSocket
一名全栈开发工程师
05-24 1245
WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket使客户端和服务器之间的数据交换变得更加简单和快速，适用于需要实时更新的应用场景,，本文介绍使用spring boot 与websocket集成的方式和方法。
spring-boot&cloud Websocket 使用
拽着尾巴的鱼儿的博客
11-08 871
spring-boot&cloud Websocket 使用 1 WebSocket介绍： WebSocket是HTML5新增的协议，它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道，比如说，服务器可以在任意时刻发送消息给浏览器。 为什么传统的HTTP协议不能做到WebSocket实现的功能？这是因为HTTP协议是一个请求－响应协议，请求必须先由浏览器发给服务器，服务器才能响应这个请求，再把数据发送给浏览器。换句话说，浏览器不主动请求，服务器是没法主动发数据给浏览器的 2 websock
spring boot+websocket
04-27
在Spring Boot项目中，我们需要引入`spring-boot-starter-websocket`依赖来启用WebSocket支持。在`pom.xml`或`build.gradle`文件中添加相应的依赖项。 ```xml <!-- Maven --> <groupId>org.springframework.boot ...
Java Spring boot框架下简单的websocketDemo
06-27
在这个"Java Spring Boot框架下的简单websocketDemo"中，我们将探讨如何在Spring Boot项目中集成WebSocket，实现一个基本的实时通信示例。 首先，我们需要在Spring Boot项目中引入WebSocket的相关依赖。Spring Boot...
WebSocket：WebSocket Spring Boot项目
02-14
Spring Boot作为流行的Java开发框架，提供了便捷的方式来集成WebSocket，使得开发人员可以轻松地在Spring Boot项目中实现WebSocket功能。 首先，让我们深入理解WebSocket的基本概念。WebSocket是基于TCP的协议，其...
spring-boot-starter-websocket.zip
08-24
对于“spring-boot-starter-websocket.zip”这个压缩包，我们可以推断它包含了Spring Boot项目中用于WebSocket通信的相关起步依赖。WebSocket是一种在客户端和服务器之间建立长连接的协议，使得实时双向通信成为可能...
跨页面进行数据通讯
最新发布
榴莲不好吃的专栏
09-02 367
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
vue3+vite 通过js引入的src，在打包后为什么不能显示
肖肖肖丽珠的博客
09-02 226
页面有个图片我是动态设置的。但是打包之后一直没有找到。我本来使用的绝对定位发现不行，改成了相对的也不行，最后改成下面的这种就可以啦。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2421
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1324
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值