【WebSocket】一个简单的前后端交互Demo

2022-06-15 22:04:01 阅读：177 来源： 互联网

标签：WebSocket Demo session org import message 交互客户端

后端部分：

直接使用Springboot，依赖只有内嵌tomcat和对应的websocket封装启动包

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.3.RELEASE</version>
    </parent>

    <groupId>cn.cloud9</groupId>
    <artifactId>WebSocket</artifactId>
    <version>1.0-SNAPSHOT</version>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>

    <dependencies>
        <!-- 内嵌Tomcat库来提供WebSocketAPI -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!-- Spring对WebSocket的扩展Starter -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
    </dependencies>

</project>

定义WebSocket接口

package cn.cloud9.endpoint;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

/**
 * @author OnCloud9
 * @description
 * @project WebSocket
 * @date 2022年06月15日 20:13
 *
 * ws://localhost:8080/ws/test
 */
@Component
@ServerEndpoint("/ws/test")
public class TestEndpoint {
    private static final Logger LOGGER = LoggerFactory.getLogger(TestEndpoint.class);

    private static final Map<String, Session> CLIENT_SESSION_MAP = new ConcurrentHashMap<>();

    /**
     * 侦测客户端向此服务建立连接，此终端实例会新创建出来
     * @param session
     */
    @OnOpen
    public void onOpen(Session session) {
        LOGGER.info("客户端 {} 开启了连接", session.getId());
        // 默认按照ID保管存放这个客户端的会话信息
        CLIENT_SESSION_MAP.put(session.getId(), session);
    }

    /**
     * 侦测客户端异常
     * @param session
     * @param error
     */
    @OnError
    public void one rror(Session session, Throwable error) {
        LOGGER.info("客户端 {} 连接异常... 异常信息：{}", session.getId(), error.getMessage());
        LOGGER.error(error.getMessage());
    }

    /**
     * 侦测客户端向此服务端发送消息
     * @param session
     * @param message
     */
    @OnMessage
    public void onMessage(Session session, String message) {
        // 可根据会话ID或者message中自定义唯一标识从容器中取出会话对象来进行操作
        LOGGER.info("收到消息, 来自客户端 {}, 消息内容 -> {}", session.getId(), message);
    }

    /**
     * 侦测客户端关闭事件
     * @param session
     */
    @OnClose
    public void onClose(Session session) {
        LOGGER.info("客户端 {} 关闭了连接...", session.getId());
        // 客户端关闭时，从保管容器中踢出会话
        CLIENT_SESSION_MAP.remove(session.getId());
    }

    /**
     * 给所有客户端发送消息
     * @param message
     */
    public static void sendMessageForAllClient(String message) {
        CLIENT_SESSION_MAP.values().forEach(session -> {
            try {
                LOGGER.info("给客户端 {} 发送消息 消息内容: {}", session.getId(), message);
                session.getBasicRemote().sendText(message);
            } catch (IOException e) {
                e.printStackTrace();
                LOGGER.info("给客户端 {} 发送消息失败， 异常信息：{}", session.getId(), e.getMessage());
            }
        });
    }


}

配置WebSocket接口暴露器

package cn.cloud9.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * @author OnCloud9
 * @description
 * @project WebSocket
 * @date 2022年06月15日 20:42
 */
@Configuration
public class WebSocketConfig {
    /**
     * 如果使用Springboot默认内置的tomcat容器，则必须注入ServerEndpoint的bean；
     * 如果使用外置的web容器，则不需要提供ServerEndpointExporter，下面的注入可以注解掉
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
        return new ServerEndpointExporter();
    }
}

写一个Controller，通过一般Http接口向WebSocket客户端推送消息

package cn.cloud9.controller;

import cn.cloud9.endpoint.TestEndpoint;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

/**
 * @author OnCloud9
 * @description
 * @project WebSocket
 * @date 2022年06月15日 20:46
 */
@RestController
@RequestMapping("/api/ws")
public class WebSocketController {

    /**
     * http://localhost:8080/api/ws/send
     * @param message
     * @return
     */
    @GetMapping("/send")
    public boolean send(@RequestParam String message) {
        TestEndpoint.sendMessageForAllClient(message);
        return true;
    }
}

前端页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket 页面客户端</title>
</head>
<body>

<div>
    <button onclick="initConnection()">开启WebSocket连接</button>
</div>
<div>
    <input type="text" id="message" ><button onclick="sendMessageFromClient()">发送消息</button>
</div>

<div>
    <button onclick="closeConnection()">关闭连接</button>
</div>

<script>
    const connectionUrl = 'ws://localhost:8080/ws/test'
    var webSocket = null

    function initConnection() {
        webSocket = new WebSocket(connectionUrl)

        webSocket.onopen = (event) => {
            console.log('建立新的WebSocket连接')
        }

        webSocket.onmessage = (event) => {
            const message = JSON.stringify(event.data)
            console.log(`收到服务端发送的消息，消息内容 -> ${message}`)
        }

        webSocket.onerror = (error) => {
            console.log(`WebSocket连接异常 -> ${JSON.stringify(error)}`)
        }

        webSocket.onclose = (event) => {
            console.log(`WebSocket连接关闭 -> ${JSON.stringify(event)}`)
        }
    }

    function sendMessageFromClient() {
        const message = document.querySelector('#message').value
        webSocket.send(JSON.stringify({ message: message }))
    }

    function closeConnection() {
        webSocket.close()
    }
</script>
</body>
</html>

标签：WebSocket,Demo,session,org,import,message,交互,客户端
来源： https://www.cnblogs.com/mindzone/p/16379941.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

【WebSocket】一个简单的前后端交互Demo

后端部分：

前端页面：