springboot项目跟JavaScript简单websocket使用方式_Javascript

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 com.ruoyi.common.utils.socket.handshakemessage;
import org.springframework.stereotype.component;
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;

@component
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
    }
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。

springboot项目跟JavaScript简单websocket使用方式

websocket 简绍

websocket 的优势包括

javascript 设置

处理事件

java 服务端设置

导jar包

创建websocket端点

@enablewebsocket

registerwebsockethandlers

实现websocket处理器

afterconnectionestablished

afterconnectionclosed

handletextmessage

注销websocket连接

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

总结

推荐阅读

JeecgBoot文件上传实现方式

JDK自带监控工具jstat、jmap、jstack的使用指南(附命令示例)

C# .NET实现Excel到JSON的自动化转换

jacksonJson序列化Map时指定Long序列化为String的实践

在CentOS上快速安装NVM和Node.js 14的完整指南与优化方案

NGINX njs从基础配置到高级特性实战

猜你喜欢

发表评论

springboot项目跟JavaScript简单websocket使用方式

websocket 简绍

websocket 的优势包括

javascript 设置

处理事件

java 服务端设置

导jar包

创建websocket端点

@enablewebsocket

registerwebsockethandlers

实现websocket处理器

afterconnectionestablished

afterconnectionclosed

handletextmessage

注销websocket连接

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

总结

推荐阅读

JeecgBoot文件上传实现方式

JDK自带监控工具jstat、jmap、jstack的使用指南(附命令示例)

C# .NET实现Excel到JSON的自动化转换

jacksonJson序列化Map时指定Long序列化为String的实践

在CentOS上快速安装NVM和Node.js 14的完整指南与优化方案

NGINX njs从基础配置到高级特性实战

猜你喜欢

发表评论

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