两个springboot+websocket之间的通信

2020回血第8天

链接: https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket.

![Alt](https://img-blog.csdnimg.cn/20200108190004844.pngAlt

什么原因要用这样的方式实现通讯?

说来话短,项目组中有人让用,那就自己摸索着走着瞧呗!
我的浅薄的印象中,正常点逻辑想,在自己的云端服务上做一个websocket的服务,如此就有求有应的代理了;再一个在本地搭一个websocket服务,作用就是哪个用哪个本地用我的本地websocket服务咯。
嗯,由于些许原因,项目的代码,就不做展示,就给成功的框架…

SHOW TIME
> 每个图片代表一个类,每个类的解释都在图片中,方便ctrl+c /ctrl+v ,这样提升效率你我他她
服务端
//新手要注意下,下面这个注解
@Component
//@ServerEndpoint(value="/ws/commodity/{fromUserId}/{toUserId}",configurator = SpringConfigurator.class)
@ServerEndpoint(value="/web/commodity/{fromUserId}/{toUserId}")//这个{}可有可无业务需求吧
public class WebSocketServer {
   
    // 已经建立链接的对象缓存起来,也不一定非得用这个容器做容器-。-
    private static ConcurrentMap<Integer, WebSocketServer> serverMap = new ConcurrentHashMap<Integer, WebSocketServer>();
    // 当前session,嗯,做个样子,方便其他方法欣赏,借鉴
    private Session currentSession;
    @OnOpen
    public void onOpen(Session session, @PathParam("fromUserId") int fromUserId, @PathParam("toUserId") int toUserId) throws IOException {
   
        this.currentSession = session;
        serverMap.put(fromUserId, this);
    }
    @OnClose
    public void onClose(Session session, CloseReason reason) {
   
        System.out.println(reason.toString());
           //关闭链接时,删除缓存对象,要是做多个,就一个一个遍历吧,这个遍历容器删除嘛,-。-有小问题,
           //自己注意吧。
            serverMap.
  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
以下是一个基于 Spring Boot、WebSocket 和 Vue 实现后端向前端实时推送数据的代码示例: 1. 后端代码 ``` @Controller public class WebSocketController { private final WebSocketService webSocketService; @Autowired public WebSocketController(WebSocketService webSocketService) { this.webSocketService = webSocketService; } @GetMapping("/") public String index() { return "index"; } @MessageMapping("/send") public void send(String message) { webSocketService.sendAll(message); } @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } } ``` ``` @Service public class WebSocketService { private final List<Session> sessions = new CopyOnWriteArrayList<>(); public void add(Session session) { sessions.add(session); } public void remove(Session session) { sessions.remove(session); } public void sendAll(String message) { sessions.forEach(session -> { try { session.getBasicRemote().sendText(message); } catch (IOException e) { e.printStackTrace(); } }); } } ``` 2. 前端代码 ``` <template> <div> <h1>Real-time data:</h1> <ul> <li v-for="(data, index) in dataList" :key="index">{{ data }}</li> </ul> <input type="text" v-model="message" /> <button @click="send">Send</button> </div> </template> <script> export default { data() { return { dataList: [], message: '' } }, mounted() { const ws = new WebSocket('ws://localhost:8080/ws'); ws.onmessage = (event) => { this.dataList.push(event.data); }; ws.onclose = () => { console.log('Connection closed'); }; }, methods: { send() { const ws = new WebSocket('ws://localhost:8080/ws'); ws.onopen = () => { ws.send(this.message); ws.close(); }; } } } </script> ``` 在这个示例中,我们首先创建了一个 WebSocket 服务端,其中包含了一个用于处理客户端发送的消息的方法 send(),它会将接收到的消息发送给所有连接上的客户端。我们还创建了一个 WebSocketService,用于管理客户端连接和消息发送。 在前端,我们通过 Vue 的 mounted 生命周期创建了一个 WebSocket 连接,并在每次接收到服务器发来的消息时将其添加到一个数据列表中,然后在模板中通过 v-for 渲染出来。我们还在模板中添加了一个文本框和一个按钮,用于向服务器发送消息。当用户点击按钮时,我们创建一个新的 WebSocket 连接,并在连接打开后发送用户输入的消息,然后立即关闭连接。 要注意的是,我们在前端中创建了两个 WebSocket 连接,一个用于接收服务器推送的数据,另一个用于向服务器发送数据。这是因为 WebSocket 是全双工通信,可以同时进行发送和接收操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值