springboot前端react springboot 前端

转载

attitude 2024-07-21 10:21:14

文章标签 springboot前端react websocket java vue http 文章分类 架构后端开发

什么是WebScoket?

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

为什么使用WebScoket？

因为：HTTP 协议有一个缺陷：通信只能由客户端发起，HTTP 协议做不到服务器主动向客户端推送信息。而WebScoket可以由服务器主动发送信息给客户端。

应用实例：

maven依赖：

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

启用WebSocket的支持：创建WebSocketConfig类

package com.iecas.monitor.webscoket.config;

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

/**
 * @Auther: sy
 * @Date: 2020/10/29 20:57
 * @Description: 配置websocket后台客户端
 */

@Component
public class WebSocketConfig {
    /**
     * ServerEndpointExporter 作用
     *
     * 这个Bean会自动注册使用@ServerEndpoint注解声明的websocket endpoint
     *
     * @return
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

WebSocketServer：

这就是重点了，核心都在这里。

因为WebSocket是类似客户端服务端的形式(采用ws协议)，那么这里的WebSocketServer其实就相当于一个ws协议的Controller
直接@ServerEndpoint("/webScoket/send") 、@Component启用即可，然后在里面实现@OnOpen开启连接，@onClose关闭连接，@onMessage接收消息等方法。
新建一个LinkedList webSocketServiceList用于储存多个连接，当需要推送时同时推送多个页面。
sendInfoOne(String message )方法直接调用发送到前端，scheduledSend()定时监听设置推送条件，符合条件进行推送。

package com.iecas.monitor.webscoket.service;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import io.swagger.annotations.ApiOperation;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang.StringUtils;
import org.springframework.scheduling.annotation.EnableScheduling;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Component;
import org.springframework.util.CollectionUtils;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.LinkedList;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.ConcurrentLinkedQueue;

@Slf4j
@Component
@EnableScheduling   // 2.开启定时任务
@ServerEndpoint("/websocket/send")
public class WebSocketGroupService {

    /**
     * 静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
     */
    private static int onlineCount = 0;
    /**
     * concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
     */
    private static LinkedList<WebSocketGroupService> webSocketServiceList = new LinkedList<>();
    /**
     * concurrent包的线程安全Set，用来存放要发送的数据
     */
    private static LinkedList<String> messageList = new LinkedList<>();

    /**
     * 与某个客户端的连接会话，需要通过它来给客户端发送数据
     */
    private Session session;

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        webSocketServiceList.add(this);
        addOnlineCount();
        log.info("当前连接数为:" + getOnlineCount());
        try {
            sendMessage("连接成功");
        } catch (IOException e) {
            log.error("连接失败!!!!!!");
        }
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        webSocketServiceList.remove(this);
        subOnlineCount();
        log.info("当前在线人数为:" + getOnlineCount());
    }

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("报文:" + message);
        //消息保存到数据库、redis
        if (StringUtils.isNotBlank(message)) {
            try {
                //解析发送的报文
                JSONObject jsonObject = JSON.parseObject(message);
                for (WebSocketGroupService webSocketGroupService : webSocketServiceList) {
                    webSocketGroupService.sendMessage(jsonObject.toJSONString());
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("错误原因:" + error.getMessage());
        error.printStackTrace();
    }

    /**
     * 实现服务器主动推送
     */
    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }

    @ApiOperation("添加定时任务")
    @Scheduled(cron = "0/10 * * * * ?")
    private void scheduledSend() {
        try {
            //发送消息数
            for (String message : messageList) {
                //发送连接数
                for (WebSocketGroupService webSocketGroupService : webSocketServiceList) {
                    //发送消息
                    webSocketGroupService.sendMessage(message);
                }
            }
            if (!CollectionUtils.isEmpty(messageList)) {
                log.info("发送成功：共发送给[{}]个页面，[{}]个消息", webSocketServiceList.size(), messageList.size());
                messageList.clear();
            }
        } catch (Exception e) {
            log.error("发送失败：" + e);
            e.printStackTrace();
        }
    }

    /**
     * 将发送消息加入缓存
     */
    public static void sendInfo(String message) throws IOException {
        try {
            messageList.add(message);
        } catch (Exception e) {
            log.error("发送失败：" + e);
            e.printStackTrace();
        }
    }

    /**
     * 直接发送自定义消息
     */
    public static void sendInfoOne(String message ) throws IOException {
        try {
            for (WebSocketGroupService webSocketGroupService : webSocketServiceList) {
                webSocketGroupService.sendMessage(message);
            }
            log.info("共发送[{}]个消息，成功" + webSocketServiceList.size());
        } catch (Exception e) {
            log.error("发送失败：" + e);
            e.printStackTrace();
        }
    }

    public static synchronized int getOnlineCount() {
        return onlineCount;
    }

    public static synchronized void addOnlineCount() {
        WebSocketGroupService.onlineCount++;
    }

    public static synchronized void subOnlineCount() {
        WebSocketGroupService.onlineCount--;
    }
}

测试消息推送：

自己的Controller写个方法调用WebSocketServer.sendInfo();即可

package com.iecas.monitor.webscoket.controller;

import com.iecas.monitor.webscoket.service.WebSocketGroupService;
import com.iecas.monitor.webscoket.service.WebSocketService;
import org.java_websocket.server.WebSocketServer;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;

import java.io.IOException;

/**
 * WebSocketController
 */
@RestController
public class WebSocketController {

    //通过controller返回html界面
    @RequestMapping("/index")
    public String indexJumpPage() {
        return "index";
    }

    @GetMapping("page")
    public ModelAndView page() {
        return new ModelAndView("websocket");
    }

    @GetMapping("/push/{name}")
    public ResponseEntity<String> pushToWeb(@PathVariable String name) throws IOException {
        WebSocketService.sendInfoByType("测试推送");
        return ResponseEntity.ok("MSG SEND SUCCESS");
    }

    @GetMapping("/send/{name}")
    public ResponseEntity<String> send(@PathVariable String name) throws IOException {
        WebSocketGroupService.sendInfo("测试推送");
        return ResponseEntity.ok("MSG SEND SUCCESS");
    }
}

前端HTML5代码：

前端测试代码index.html位置：/src/main/resources/templates下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>websocket通讯</title>
</head>
<script type = "text/javascript">
    var socket;
    function openSocket() {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else{
            console.log("您的浏览器支持WebSocket");
             socket = new WebSocket("ws://localhost:8080/websocket/send");
            //打开事件
            socket.onopen = function() {
                console.log("websocket已打开");
                //socket.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            socket.onmessage = function(msg) {
                console.log(msg.data);
            };
            //关闭事件
            socket.onclose = function() {
                console.log("websocket已关闭");
            };
            //发生了错误事件
            socket.onerror = function() {
                console.log("websocket发生了错误");
            }
        }
    }
    function sendMessage() {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else {
            console.log("您的浏览器支持WebSocket");
        }
    }
</script>
<body>
<p>【message】：
<div><input id="message" name="message" type="text" value="message is null"></div>
<p>【操作】：
<div><a onclick="openSocket()">开启socket</a></div>
<p>【操作】：
<div><a onclick="sendMessage()">发送消息</a></div>
</body>

</html>

在SpringBoot配置文件中加入：

spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    mode: LEGACYHTML5
    cache: false

运行效果：

显示页面路径：http://localhost:8080/index

调用发送测试路径：http://localhost:8080/send/sy

改动后面参数查看发送效果

springboot前端react springboot 前端_springboot前端react

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：fluent与Python怎么连接控制

下一篇：java 通过类名创建类对象 java根据类名简称获得类的class

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯