在项目中使用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”则发送消息成功。

目录
相关文章
|
3月前
|
前端开发 网络协议 JavaScript
在Spring Boot中实现基于WebSocket的实时通信
在Spring Boot中实现基于WebSocket的实时通信
|
6天前
|
前端开发 Python
前后端分离的进化:Python Web项目中的WebSocket实时通信解决方案
在现代Web开发领域,前后端分离已成为一种主流架构模式,它促进了开发效率、提升了应用的可维护性和可扩展性。随着实时数据交互需求的日益增长,WebSocket作为一种在单个长连接上进行全双工通讯的协议,成为了实现前后端实时通信的理想选择。在Python Web项目中,结合Flask框架与Flask-SocketIO库,我们可以轻松实现WebSocket的实时通信功能。
18 2
|
5月前
|
网络协议 JavaScript 前端开发
WebSocket:实现客户端与服务器实时通信的技术
WebSocket:实现客户端与服务器实时通信的技术
|
2月前
|
缓存 JavaScript 前端开发
为开源项目 go-gin-api 增加 WebSocket 模块
为开源项目 go-gin-api 增加 WebSocket 模块
33 2
|
2月前
|
Linux Python
【Azure 应用服务】Azure App Service For Linux 上实现 Python Flask Web Socket 项目 Http/Https
【Azure 应用服务】Azure App Service For Linux 上实现 Python Flask Web Socket 项目 Http/Https
|
3月前
|
前端开发 JavaScript API
探索Python Django中的WebSocket集成:为前后端分离应用添加实时通信功能
【7月更文挑战第17天】现代Web开发趋势中,前后端分离配合WebSocket满足实时通信需求。Django Channels扩展了Django,支持WebSocket连接和异步功能。通过安装Channels、配置设置、定义路由和消费者,能在Django中实现WebSocket交互。前端使用WebSocket API连接后端,实现双向数据流,如在线聊天功能。集成Channels提升Web应用的实时性和用户体验,适应实时交互场景的需求。**
128 6
|
3月前
|
前端开发 Python
前后端分离的进化:Python Web项目中的WebSocket实时通信解决方案
【7月更文挑战第18天】在Python的Flask框架中,结合Flask-SocketIO库可轻松实现WebSocket实时通信,促进前后端分离项目中的高效交互。示例展示了一个简单的聊天应用:Flask路由渲染HTML,客户端通过Socket.IO库连接服务器,发送消息并监听广播。此方法支持多种实时通信协议,适应不同环境,提供流畅的实时体验。
75 3
|
3月前
|
安全 数据安全/隐私保护 UED
优化用户体验:前后端分离架构下Python WebSocket实时通信的性能考量
【7月更文挑战第17天】前后端分离趋势下,WebSocket成为实时通信的关键,Python有`websockets`等库支持WebSocket服务。与HTTP轮询相比,WebSocket减少延迟,提高响应。连接管理、消息传输效率、并发处理及安全性是性能考量重点。使用WebSocket能优化用户体验,尤其适合社交、游戏等实时场景。开发应考虑场景需求,充分利用WebSocket优势。
118 3
|
3月前
|
JavaScript 前端开发 UED
WebSocket在Python Web开发中的革新应用:解锁实时通信的新可能
【7月更文挑战第16天】WebSocket是实现Web实时通信的协议,与HTTP不同,它提供持久双向连接,允许服务器主动推送数据。Python有多种库如websockets和Flask-SocketIO支持WebSocket开发。使用Flask-SocketIO的简单示例包括定义路由、监听消息事件,并在HTML中用JavaScript建立连接。WebSocket提高了实时性、减少了服务器压力,广泛应用于聊天、游戏等场景。
36 1
|
3月前
|
移动开发 前端开发 网络协议
Python Web实时通信新纪元:基于WebSocket的前后端分离技术探索
【7月更文挑战第16天】WebSocket增强Web实时性,Python借助Flask-SocketIO简化实现。安装`flask`和`flask-socketio`,示例展示服务器端接收连接及消息并广播响应,前端HTML用Socket.IO库连接并监听事件。WebSocket开启双向通信新时代,助力动态Web应用开发。
47 1