在项目中使用WebSocket进行前后端通信

简介: 在项目中使用WebSocket进行前后端通信

不废话直接上代码

后端

一、引入WebSocket依赖

    <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-websocket -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

二、编写WebSocket配置类

import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
/**
 * @ClassName WebSocketConfig
 * @Description WebSocket配置类
 * @Author 翟文彪
 * @Date 2022/1/6 0:12
 * @Version 1.0
 */
@Component
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter(){
         return new ServerEndpointExporter();
    }
}

三、编写WebSocket业务类

WebSocket业务类我选择写在Service层,但是它又属于一种特殊的Service,注意看下面代码中类上方的注解。

import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.util.concurrent.CopyOnWriteArraySet;
/**
 * @ClassName WebSocket
 * @Description WebSocket实现(一个特殊的service)
 * @Author 翟文彪
 * @Date 2022/1/6 0:15
 * @Version 1.0
 */
@Component
@ServerEndpoint("/webSocket")
@Slf4j
public class WebSocket {
    private Session session;
    private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();
    @OnOpen
    public void onOpen(Session session){
        this.session = session;
        webSocketSet.add(this);
        log.info("webSocket消息,有新的连接");
    }
    @OnClose
    public void onClose(){
        webSocketSet.remove(this);
        log.info("webSocket消息,连接断开");
    }
    @OnMessage
    public void onMessage(String message){
        log.info("webSocket消息,收到客户端发来的消息",message);
    }
    public void sendMessage(String  message){
        for (WebSocket webSocket: webSocketSet){
            log.info("webSocket消息,广播消息",message);
            try {
                webSocket.session.getBasicRemote().sendText(message);
            }catch (Exception e){
                e.printStackTrace();
            }
        }
    }
}

@ServerEndpoint 中的地址就是需要前端调取的接口地址。

前端

一、连接后端WebSocket

<script>
  var websocket = null;
  if('WebSocket' in window){
    websocket =  new WebSocket('ws://你的IP地址:你的端口号/webSocket');
  }else{
    alert('该浏览器不支持WebSocket')
  }
  websocket.onopen = function (event){
    console.log('建立连接');
  }
  websocket.onclose = function (event){
    console.log('连接关闭');
  }
  websocket.onmessage= function (event){
    console.log('收到消息:'+event.data);
    // 进行弹窗提醒或其他操作
  }
  websocket.onerror= function (){
    alert('websocket通信发生错误!')
  }
  windows.onbeforeunload = function(){
    websocket.close()
  }
</script>

实现

做完以上步骤操作后,我们可以直接在springboot项目中,在你想发送消息的实现类中@Autowired 你编写的WebSocket业务类,然后调用sendMessage方法即可实现发送消息。

例:

@Autowired
private WebSocket webSocket;
public void method(){
  // 具体方法实现
  **************
  // 发送WebSocket消息
  webSocket.sendMessage("success");
}

当这个方法执行后,前端能收到“success”则发送消息成功。

目录
相关文章
|
7月前
|
监控 前端开发 Cloud Native
解决WebSocket通信:前端拿不到最后一条数据的问题
解决WebSocket通信:前端拿不到最后一条数据的问题
148 0
|
2天前
|
网络协议 Java Go
【Go语言专栏】Go语言中的WebSocket实时通信应用
【4月更文挑战第30天】Go语言(Golang)是Google开发的编程语言,适用于云计算、微服务等领域。本文介绍了WebSocket,一种实现浏览器与服务器全双工通信的协议,其特点是实时性、全双工和轻量级。在Go中实现WebSocket,可以使用gorilla/websocket库。示例展示了如何创建服务器端和客户端,实现消息的收发。WebSocket广泛应用于聊天、游戏、通知推送和实时数据同步等场景。学习Go语言中的WebSocket对于开发实时通信应用至关重要。
|
2天前
|
监控 安全 API
WebSocket通过建立一个持久的连接实现实时双向通信
【5月更文挑战第2天】WebSocket通过建立一个持久的连接实现实时双向通信
25 4
|
2天前
|
缓存 监控 前端开发
【Go 语言专栏】Go 语言中的 WebSocket 实时通信应用
【4月更文挑战第30天】本文探讨了Go语言在WebSocket实时通信中的应用。WebSocket作为全双工通信协议,允许持续的双向通信。Go语言凭借其高效和并发特性,适合构建实时应用。文中概述了在Go中实现WebSocket的基本步骤,包括服务器和客户端的建立与通信,并列举了实时聊天、数据监控和在线协作等应用案例。同时,强调了消息格式、并发处理、错误处理和安全性的注意事项。通过数据压缩、缓存管理和连接管理等策略可优化性能。Go语言还能与数据库和前端框架结合,提升用户体验。总之,Go语言为WebSocket实时通信提供了强大支持,有望在更多领域发挥作用。
|
2天前
|
JavaScript PHP UED
【PHP开发专栏】PHP与WebSocket实时通信
【4月更文挑战第30天】本文介绍了PHP实现WebSocket实时通信的原理、使用方法和实际案例。WebSocket是基于HTTP的全双工通信协议,PHP 5.4以上版本支持WebSocket,可通过内置函数或第三方库如Socket.io、PHP-WebSocket来实现。文章详细展示了创建WebSocket服务器和客户端的PHP代码示例,并提及在PHP中使用Socket.io库进行实时通信。
|
2天前
|
JSON JavaScript 前端开发
服务器通信:使用WebSocket与后端实时交互
【4月更文挑战第24天】WebSocket为解决服务器与客户端实时双向通信问题而生,常用于聊天、游戏和实时通知等场景。本文通过4步教你实现WebSocket通信:1) 客户端使用JavaScript创建WebSocket连接;2) 监听`open`、`message`和`close`事件;3) 使用`send`方法发送数据;4) 使用`close`方法关闭连接。服务器端则需处理连接和数据发送,具体实现依后端技术而定。WebSocket为现代Web应用的实时交互提供了强大支持。
|
2天前
|
JavaScript 前端开发 Java
Java WebSocket编程:实现实时通信
【4月更文挑战第16天】本文介绍了Java如何利用WebSocket API实现实时通信。WebSocket协议提供全双工通信,减少延迟,提高效率。Java EE的WebSocket API让开发者能轻松创建WebSocket端点,示例代码展示了端点的生命周期方法。客户端可使用JavaScript的WebSocket API进行连接和通信。安全性是关键,应启用WSS加密并过滤客户端数据。通过学习和实践,开发者能构建出满足现代Web应用实时需求的系统。
|
2天前
|
网络协议 JavaScript 前端开发
深入了解WebSocket:实时双向通信的魔法
深入了解WebSocket:实时双向通信的魔法
|
2天前
|
监控 小程序 前端开发
小程序全栈开发中的WebSocket实时通信实践
【4月更文挑战第12天】本文探讨了小程序全栈开发中WebSocket实时通信的实践,WebSocket作为实现双向实时通信的协议,其长连接特性和双向通信能力在实时聊天、推送、游戏和监控等场景中发挥关键作用。开发者需注意安全性、性能和兼容性问题,以优化用户体验并确保小程序稳定运行。通过掌握WebSocket,开发者能提升小程序的功能性和用户体验。
|
6月前
|
Go API 开发者
Golang Websocket框架:实时通信的新选择
Golang Websocket框架:实时通信的新选择