Websocket前后端实现

这篇具有很好参考价值的文章主要介绍了Websocket前后端实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.引入WebStocket的依赖

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

2.创建配置类 WebScoketConfig

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
 
/**
 * 开启WebSocket支持
 */
@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

新增客户的业务层
实现新增客户后,持续向前端推送客户信息。

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
 
import java.util.List;
import java.util.Map;
 
import io.recycle.modules.rest.api.dao.recycleUsersDao;
import io.recycle.modules.rest.api.entity.RecycleUsersEntity;
import io.recycle.modules.rest.api.service.RecycleUsersService;
 
 
 
@Service("recycleUsersService")
public class RecycleUsersServiceImpl implements RecycleUsersService{
 
	private static int count=0;
	@Autowired
	private NoticeWebsocket noticeWebsocket;
	@Autowired
	private RecycleUsersDao recycleUsersDao;
 
	@Override
	public void save(RecycleUsersEntity recycleUsers){
		recycleUsersDao.save(recycleUsers);
		//测试webstocket,实现新增客户往前端推送消息,直到前端回复
		boolean flag = false;
		do{
			try {
				Thread.sleep(300);    //休息300毫秒
			} catch (InterruptedException e) {
				e.printStackTrace();
				System.out.println("休息时出错000000");
			}
			//往前端发送消息
			System.out.println("count===="+count);
			boolean resultFlag = noticeWebsocket.sendMessage("新增了用户:" + recycleCustomer.toString(),count);
 
			flag = resultFlag;
 
			if (resultFlag){
				System.out.println("停止往前端发送数据,因为 resultFlag 为: "+resultFlag+"==前端已接收的消息");
			}else {
				System.out.println("往前端发送数据,因为 resultFlag 为: "+resultFlag+"==说明前端还没接收到消息");
			}
 
 
		}while ( !flag );
		System.out.println("停止往前端发数据,因为 delFlag 为: "+flag);
		count = count +1;
 
 
	}
}

3.创建WebScoketConfigServer
在websocket协议下,后端服务器等于是客户端,需要用@ServerEndpoint指定访问的路径,并使用@Component注入容器。

这里实现新增 客户,持续向前端推送客户信息,直到前端收到消息,并回复收到。

import com.alibaba.fastjson.JSONObject;
import io.recycle.modules.rest.api.dao.RecycleUsersDao;
import io.recycle.modules.rest.api.dto.websocket.NoticeWebsocketResp;
import io.recycle.modules.rest.api.entity.RecycleUsersEntity;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.util.StringUtils;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.*;
import java.util.concurrent.ConcurrentHashMap;
 
/**
 * @ServerEndpoint 注解是一个类层次的注解,它的功能主要是将目前的类定义成一个websocket服务器端,
 * 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端
 */
@ServerEndpoint("/chepaisend")
@Component
@Slf4j
public class NoticeWebsocket {
 
    //连接客户端
    public static Map<String, Session> clients = new ConcurrentHashMap<>();
 
    /**
     * userId关联sid(解决同一用户id,在多个web端连接的问题)
     */
    public static Map<String, Set<String>> conns = new ConcurrentHashMap<>();
    private String sid = null;
    //一些记录发送消息状态
    private static int initFlag =0;
    private static int tempFlag =0;
    //区分新旧消息的变量
    private static int sum=0;
    /**
     * 连接成功后调用的方法
     * @param session
     *
     */
    @OnOpen
    public void onOpen(Session session) {
        this.sid = UUID.randomUUID().toString();
 
        clients.put(this.sid, session);
 
        log.info(this.sid + "连接开启!");
    }
 
    /**
     * 连接关闭
     */
    @OnClose
    public void onClose() {
        log.info(this.sid + "连接断开!");
        clients.remove(this.sid);
    }
 
    /**
     * 判断是否连接
     * @return
     */
    public static boolean isServerClose() {
        if (NoticeWebsocket.clients.values().size() == 0) {
            log.info("已断开");
            return true;
        }else {
            log.info("已连接");
            return false;
        }
    }
 
    /**
     * 发送给所有用户
     * @param noticeType
     */
 
    public static boolean sendMessage(String noticeType,int count){
        if (sum != count){
            NoticeWebsocketResp noticeWebsocketResp = new NoticeWebsocketResp();
            noticeWebsocketResp.setNoticeType(noticeType);
            sendMessage(noticeWebsocketResp);
            sum = count;
        }
        //判断前端是否 回复了 收到消息  相等没收到,不相等 收到
        if (initFlag==tempFlag){
            NoticeWebsocketResp noticeWebsocketResp = new NoticeWebsocketResp();
            noticeWebsocketResp.setNoticeType(noticeType);
            sendMessage(noticeWebsocketResp);
        }else {
            //收到消息了,别发同一个消息了
            tempFlag = initFlag;
            return true;
        }
        tempFlag = initFlag;
        //没收到消息继续发
        return false;
    }
 
 
    /**
     * 发送给所有用户
     * @param noticeWebsocketResp
     */
    public static void sendMessage(NoticeWebsocketResp noticeWebsocketResp){
        String message = JSONObject.toJSONString(noticeWebsocketResp);
        for (Session session1 : NoticeWebsocket.clients.values()) {
            try {
                session1.getBasicRemote().sendText(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
 
    /**
     * 根据用户id发送给某一个用户
     * **/
    public static void sendMessageByUserId(String userId, NoticeWebsocketResp noticeWebsocketResp) {
        if (!StringUtils.isEmpty(userId)) {
            String message = JSONObject.toJSONString(noticeWebsocketResp);
            Set<String> clientSet = conns.get(userId);
            if (clientSet != null) {
                Iterator<String> iterator = clientSet.iterator();
                while (iterator.hasNext()) {
                    String sid = iterator.next();
                    Session session = clients.get(sid);
                    if (session != null) {
                        try {
                            session.getBasicRemote().sendText(message);
                        } catch (IOException e) {
                            e.printStackTrace();
                        }
                    }
                }
            }
        }
    }
 
 
    /**
     * 收到客户端消息后调用的方法
     * @param message
     * @param session
     */
 
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("收到来自窗口"+"的信息:"+message);
        if ("已接收到消息".equals(message)){
            //收到消息,改变flag的值
            System.out.println("前端已经收到消息,开始改变 initFlag的值,此时initFlag= "+initFlag);
            initFlag = initFlag +1;
            System.out.println("前端已经收到消息,已经改变 initFlag的值,此时initFlag== "+initFlag);
        }
 
    }
 
    /**
     * 发生错误时的回调函数
     * @param error
     */
    @OnError
    public void onError(Throwable error) {
        log.info("错误");
        error.printStackTrace();
    }
 
}

封装的发送消息的对象

import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
 
@Data
@ApiModel("ws通知返回对象")
public class NoticeWebsocketResp<T> {
 
    @ApiModelProperty(value = "通知类型")
    private String noticeType;
 
    @ApiModelProperty(value = "通知内容")
    private T noticeInfo;
 
}

4.WebSocket调用
用户发送消息给后端,,后端接收到消息后再主动推送给指定/全部用户,可以实现消息的私聊和群发功能。

import io.recycle.common.utils.R;
import io.recycle.modules.rest.api.service.impl.NoticeWebsocket;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
 
@RestController
@RequestMapping("/mytest")
public class OrderController {
	@GetMapping("/test")
    public R test() {
    	NoticeWebsocket.sendMessage("你好啊,WebSocket",1);
        return R.ok();
    }
}

前端连接文章来源地址https://www.toymoban.com/news/detail-800517.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SseEmitter</title>
</head>
<body>
<div id="message"></div>
</body>
<script>
    var limitConnect = 0;
    init();
    function init() {
        //开启webstocket服务的ip地址  ws:// + ip地址 + 访问路径
        var ws = new WebSocket('ws://127.0.0.1:8191/double-win/chepaisend');
// 获取连接状态
        console.log('连接状态:' + ws.readyState);
//监听是否连接成功
        ws.onopen = function () {
            console.log('连接状态:' + ws.readyState);
            limitConnect = 0;
            //连接成功则发送一个数据
            ws.send('连接成功');
        }
// 接听服务器发回的信息并处理展示
        ws.onmessage = function (data) {
            console.log('接收到来自服务器的消息:');
            console.log(data);
            //接收到 消息后给后端发送的 确认收到消息,后端接收到后 不再重复发消息
            ws.send('已接收到消息');
            //完成通信后关闭WebSocket连接
            // ws.close();
        }
// 监听连接关闭事件
        ws.onclose = function () {
            // 监听整个过程中websocket的状态
            console.log('连接状态:' + ws.readyState);
            reconnect();
 
        }
// 监听并处理error事件
        ws.onerror = function (error) {
            console.log(error);
        }
    }
    function reconnect() {
        limitConnect ++;
        console.log("重连第" + limitConnect + "次");
        setTimeout(function(){
            init();
        },2000);
 
    }
</script>
</html>
 

到了这里,关于Websocket前后端实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • WebSocket实现前后端消息推送

    WebSocket的代码编写会根据业务逻辑而进行变化,需要去理解编写思路,这样才能在工作中使用得游刃有余。 1. 引入依赖 2.  编写WebSocketConfig配置类 3. 编写WebSocket服务类 下面的服务类中,可以编写多个sendMeg方法(写法比较多样化),作用是发送消息回前端,使用方式就是你在自

    2024年02月11日
    浏览(39)
  • webSocket详解:技术原理+前后端实现

    一、webSocket技术原理 1、内容简介 websocket就是通过服务器向客户端推送消息,客户端也可以主动向服务器发送消息,是真正的双向平等对话,是一种长连接,只需要通过一次请求进行初始化。 2、基本机制 1.websocket是一个持久化协议,通过一次http request建立连接后,后续不需

    2023年04月23日
    浏览(31)
  • WebSocket 网络协议(实时更新 )

    WebSocket 是一种在客户端和服务器之间建立双向通信信道的网络协议。它在客户端和服务器之间建立一个持久的、全双工的连接,允许数据在两个方向上实时传输,而不需要像HTTP一样进行多次请求和响应。  WebSocket 的主要优势是减少了服务器和客户端之间的通信延迟,因为数

    2024年01月17日
    浏览(47)
  • nodejs实现前后端websocket通信+心跳示例

    nodejs后端代码  server.js 直接在文件所在目录打开cmd窗口,启动服务: node server.js 浏览器端  index.html 在本地直接运行浏览器即可! 如果有帮助,就点个赞再走 ^  ^                                               

    2024年02月13日
    浏览(36)
  • webSocket实现数据的实时推送(附:前后端代码)

            之前开发的一个管理系统项目中,首页是数据大屏展示,一开始我是用JS的 setInterval() 方法,设置一个时间,每过时间发起一次 ajax 请求。虽然也能凑活着用,但总感觉不是最优的方法,而且还比较占用资源,所以学习 WebSocke ,以下是本人的一些学习心得及前后端的

    2024年02月02日
    浏览(51)
  • 【spring(六)】WebSocket网络传输协议

    🌈键盘敲烂,年薪30万🌈 目录 核心概要: 概念介绍: 对比HTTP协议:⭐ WebSocket入门案例:⭐ websocket对比http         WebSocket是Web服务器的一个组件,WebSocket是一种基于TCP的新的 网络传输协议 ,它实现了浏览器与服务器全双工通信——浏览器只需要完成 一次握手 ,两者之

    2024年02月05日
    浏览(42)
  • WebSocket | 基于TCP的全双工通信网络协议

    ​🍃作者介绍:双非本科大三网络工程专业在读,阿里云专家博主,专注于Java领域学习,擅长web应用开发、数据结构和算法,初步涉猎Python人工智能开发和前端开发。 🦅主页:@逐梦苍穹 📕所属专栏:Java EE ✈ 您的一键三连,是我创作的最大动力🌹 WebSocket 是基于 TCP 的一

    2024年02月19日
    浏览(75)
  • 网络通信协议-HTTP、WebSocket、MQTT的比较与应用

    在今天的数字化世界中,各种通信协议起着关键的作用,以确保信息的传递和交换。HTTP、WebSocket 和 MQTT 是三种常用的网络通信协议,它们各自适用于不同的应用场景。本文将比较这三种协议,并探讨它们的主要应用领域。 HTTP (超文本传输协议) HTTP  是最常见的协议之一

    2024年02月05日
    浏览(58)
  • java实现websocket握手协议

    其中最重要的是最后几个换行不要丢,将字符串转成byte[]写给客户端即可 收到的掩码转换 下面是服务器向客户端发送消息

    2024年02月08日
    浏览(38)
  • Spring Boot整合WebSocket实现实时通信,前端实时通信,前后端实时通信

    实时通信在现代Web应用中扮演着越来越重要的角色,无论是在线聊天、股票价格更新还是实时通知,WebSocket都是实现这些功能的关键技术之一。Spring Boot作为一个简化企业级应用开发的框架,其对WebSocket的支持也非常友好。本文将详细介绍如何在Spring Boot中整合WebSocket,实现一

    2024年04月27日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包