如何使用websocket实现推送信息到客户端

最新推荐文章于 2024-05-17 10:27:09 发布

zeki豪

最新推荐文章于 2024-05-17 10:27:09 发布

阅读量1.5k

点赞数

分类专栏：后端文章标签： websocket js java

本文链接：https://blog.csdn.net/EDT777/article/details/114537721

版权

后端专栏收录该内容

146 篇文章 2 订阅

订阅专栏

文章目录

后端项目
前端项目
- socket.js
- 网页代码
功能测试
- 前端(客户端)推送信息给后端
- 后端推送数据给前端(客户端)

准备2个springboot项目,一个是前端页面的项目,一个则是后端websocket的项目

后端项目

配置

pom.xml

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

application.yml(演示端口是8085)

server:
  port: 8085

配置包

在这里插入图片描述

WebSocketConfig

ServerEndpointExporter bean扫描ServerEndpoint,这个注解和我们之前用的requestMapping相似

@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

WebSocketServer

客户端传入唯一的token(演示的{uuid})标识指定的客户端,也就是指定的用户

@Setter
@Getter
// ServerEndpointExporter bean扫描ServerEndpoint,这个注解和我们之前用的requestMapping相似
@ServerEndpoint("/{uuid}")
@Component
public class WebSocketServer {
    private Session session;
    public static ConcurrentHashMap<String,WebSocketServer> clients = new ConcurrentHashMap<>();
    /**
     *  onOpen 当客户端和服务端建立连接的时候会触发 onOpen方法
     *  onClose: 当客户端和服务端断开连接的时候会触发onClose 方法
     *  onError: 当客户端和服务端建立连接的时候出了问题会触发
     *  onMessage: 当客户端服务器发送数据的时候会被触发
     */
    @OnOpen
    public void onOpen(Session session, @PathParam( "uuid") String uuid){
        System.out.println("客户端连接===>"+uuid);
        this.session = session;
        clients.put(uuid,this);
    }
    @OnClose
    public void onClose(@PathParam( "uuid") String uuid){
        clients.remove(uuid);
    }
    @OnError
    public void onError(Throwable error) {
        error.printStackTrace();
    }

    @OnMessage
    public void onMessage(String msg){
        System.out.println(msg);
    }
}

控制器接口测试

传入token即可获取对应的客户端,然后可以推送信息给指定的客户端

@RestController
public class SendMsg {

    @RequestMapping("/sendMsg")
    public String sendMsg(String msg,String token) throws IOException {
//        根据token找到客户端 给客户端去推送数据
        WebSocketServer webSocketServer = WebSocketServer.clients.get(token);
        webSocketServer.getSession().getBasicRemote().sendText(msg);
        return "发送成功";
    }
}

前端项目

演示的端口为8080
需要引入以下两个js

socket.js

注意以下:new WebSocket("xxx") , 括号里面则是对应写入后端项目配置包中WebSocketServer的@ServerEndpoint("xxx")的括号中的信息

function createScoket(token){
    var socket;
    if(typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    }else{
        var host = window.location.origin.replace("http:","ws:")
        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
        socket = new WebSocket("ws://localhost:8085/"+token);
        //打开事件
        socket.onopen = function() {
            console.log("Socket 已打开");
            //socket.send("这是来自客户端的消息" + location.href + new Date());
        };
        //获得消息事件
        socket.onmessage = function(result) {
         console.log(result);
        };
        //关闭事件
        socket.onclose = function() {
            console.log("Socket已关闭");
        };
        //发生了错误事件
        socket.onerror = function() {
            console.log("Socket发生了错误");
        }
        //窗口关闭
        $(window).unload(function(event){
            socket.close();
        });
    }
    return socket;
}

网页代码

演示用123作为token(唯一标识),与后端websocket项目形成连接
以下的socket.send(msg); 则是前端给后端推送信息(触发了后端WebSocketServer中贴了@onMessage注解的方法)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/socket.js"></script>
    <script src="js/jquery.js"></script>
</head>
<body>
        <input type="button" value="建立连接" onclick="con()"/>
        <input type="text" id="msg">
        <input type="button" value="发送数据" onclick="sendMsg()">
</body>
<script>
    var socket;
    function con() {
        if (!socket){
            socket = createScoket(123);
        }
    }

    function sendMsg() {
            var msg = $("#msg").val();
            socket.send(msg);
    }
</script>
</html>

功能测试

前端(客户端)推送信息给后端

点击建立连接按钮后,则触发后端WebSocketServer的贴了@onOpen注解的方法,从演示的是标识是123的连接客户端
点击发送数据 按钮,则触发了后端WebSocketServer的贴了@onMessage注解的方法打印出了对应的数据666

后端推送数据给前端(客户端)

演示接口,根据WebSocketServer.clients.get(token)方法,找到指定的客户端,然后进行信息推送
在前端进行websocket连接的时候,就有放入唯一的token来标识连接,则可让后端找到此客户端(演示的token是123)

@RestController
public class SendMsg {

    @RequestMapping("/sendMsg")
    public String sendMsg(String msg,String token) throws IOException {
//        根据token找到客户端 给客户端去推送数据
        WebSocketServer webSocketServer = WebSocketServer.clients.get(token);
        webSocketServer.getSession().getBasicRemote().sendText(msg);
        return "发送成功";
    }
}

直接请求后台接口,给客户端推送信息(触发了前端socket.js代码中socket.onmessage的函数方法执行)
则对应token为123的客户端接收到信息

zeki豪

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
3
评论
如何使用websocket实现推送信息到客户端

文章目录后端项目配置配置包WebSocketConfigWebSocketServer控制器接口测试前端项目socket.js网页代码功能测试前端(客户端)推送信息给后端后端推送数据给前端(客户端)准备2个springboot项目,一个是前端页面的项目,一个则是后端websocket的项目后端项目配置pom.xml <dependency> <groupId>org.springframework.boot</groupI
复制链接

扫一扫