VUE使用websocket

已于 2024-08-27 15:12:51 修改
阅读量44 收藏
点赞数
分类专栏： 客户端服务端消息推送 文章标签： ajax
于 2024-08-27 10:52:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w_t_y_y/article/details/141597226
版权

在之前搭建好的项目的基础上新版security demo（二）前端-CSDN博客

目录

一、代码改造

1、后端改造

2、VUE使用websocket

3、测试

二、按用户推送

1、完整代码如下

1.1、前端

1.2、后端：

2、测试

一、代码改造

1、后端改造

（1）把websocket相关代码复制到web项目：

（2）添加白名单

web-socket端口无需token验证，SecurityWebConfig添加白名单

 @Bean
    public WebSecurityCustomizer webSecurityCustomizer() {
        return (web) -> web.ignoring().requestMatchers("/param/**", "/user-websocket-endpoint/**","/menu-websocket-endpoint/**");
    }
2、VUE使用websocket
<template>
  <div>this is user manage</div>
</template>
<script>
export default {
  data() {
    return {
      socket: null,
      message: '',
      inputMessage: ''
    };
  },
  mounted() {
    // Create a new WebSocket connection
    this.socket = new WebSocket("ws://localhost:2222/securityDemo/user-websocket-endpoint");
    
    // Set up event listeners
    this.socket.onopen = (event) => {
      console.log('WebSocket connection opened.');
      this.socket.send("Hello Server! This is menu client");
    };
    
    this.socket.onmessage = (event) => {
      this.message = event.data;
    };
    
    this.socket.onerror = (error) => {
      console.error('WebSocket Error:', error);
    };
    
    this.socket.onclose = (event) => {
      console.log('WebSocket connection closed.');
    };
  },
  methods: {
    sendMessage() {
      if (this.socket && this.inputMessage) {
        this.socket.send(this.inputMessage);
        this.inputMessage = ''; // Clear the input field after sending
      }
    }
  },
  // beforeDestroy() {
  //   // Close the WebSocket connection when the component is destroyed
  //   if (this.socket) {
  //     this.socket.close();
  //   }
  // }
};
</script>

menumanage.vue代码和这个类似。 

3、测试

分别启动前后端，打开浏览器

（1）查看消息收发

切换到菜单管理：

再次切换到user页面，会断开之前的连接重新建立连接，因为vue每次进入页面都会执行mounted。 

idea控制台打印：

（2）postman调用user发送消息接口

浏览器接收成功：

postman调用menu发送消息接口：

浏览器接收成功：

二、按用户推送

 上面的demo，所有的客户端都会接收到消息，现在希望推送给某个user。则需要建立WebSocketSession和userId的关系，

（1）前端在open建立连接时发送userId；

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Client</title>
</head>
<body>
    <script>
        const userId = "user123"; // Replace with dynamic user ID

        const socket = new WebSocket(`ws://localhost:8080/websocket-endpoint`);

        socket.onopen = function(event) {
            console.log("WebSocket connection opened.");
            socket.send(JSON.stringify({ type: "REGISTER", userId: userId }));
        };

        socket.onmessage = function(event) {
            const message = event.data;
            console.log("Message from server: " + message);
        };

        socket.onclose = function(event) {
            console.log("WebSocket connection closed.");
        };

        socket.onerror = function(error) {
            console.error("WebSocket Error: " + error);
        };
    </script>
</body>
</html>

（2）后端WebSocketHandler存储userId和WebSocketSession的映射关系

import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
import org.springframework.web.socket.CloseStatus;
import org.springframework.stereotype.Component;

import java.io.IOException;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.ConcurrentMap;

@Component
public class UserWebSocketHandler extends TextWebSocketHandler {

    private final ConcurrentMap<String, WebSocketSession> userSessions = new ConcurrentHashMap<>();

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        String userId = getUserIdFromSession(session);
        if (userId != null) {
            userSessions.put(userId, session);
            System.out.println("WebSocket connection established for userId: " + userId);
        }
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        String userId = getUserIdFromSession(session);
        if (userId != null) {
            userSessions.remove(userId);
            System.out.println("WebSocket connection closed for userId: " + userId);
        }
    }

    public void sendMessageToUser(String userId, String message) throws IOException {
        WebSocketSession session = userSessions.get(userId);
        if (session != null && session.isOpen()) {
            session.sendMessage(new TextMessage(message));
        }
    }

    private String getUserIdFromSession(WebSocketSession session) {
        // Assuming userId is stored as a session attribute
        return (String) session.getAttributes().get("userId");
    }
}

（3）发送消息时根据userId检索目标WebSocketSession。

1、完整代码如下
1.1、前端
<template>
  <div>this is user manage：{{this.userAccount}}</div>
</template>
<script>
export default {
  data() {
    return {
      socket: null,
      message: '',
      inputMessage: ''
    };
  },
computed: {
    userAccount() {
      return this.$store.getters.name;
    }
},
  mounted() {
    // Create a new WebSocket connection
    this.socket = new WebSocket("ws://localhost:2222/securityDemo/user-websocket-endpoint");
    
    // Set up event listeners
    this.socket.onopen = (event) => {
      console.log('WebSocket connection opened.');
       let msg = {"userAccount":this.userAccount}
       this.socket.send(JSON.stringify(msg));
    };
    
    this.socket.onmessage = (event) => {
      this.message = event.data;
    };
    
    this.socket.onerror = (error) => {
      console.error('WebSocket Error:', error);
    };
    
    this.socket.onclose = (event) => {
      console.log('WebSocket connection closed.');
    };
  },
  methods: {
    sendMessage() {
      if (this.socket && this.inputMessage) {
        this.socket.send(this.inputMessage);
        this.inputMessage = ''; // Clear the input field after sending
      }
    }
  },
  // beforeDestroy() {
  //   // Close the WebSocket connection when the component is destroyed
  //   if (this.socket) {
  //     this.socket.close();
  //   }
  // }
};
</script>
1.2、后端：

 （1）常量

package com.demo.security.ws.constant;

import lombok.Getter;
import org.springframework.web.socket.WebSocketSession;

import java.util.HashMap;
import java.util.HashSet;
import java.util.Map;
import java.util.Set;

public class UserSessionConstant {

    @Getter
    private static Map<String,WebSocketSession> sessionMap = new HashMap<>();

    public static void add(String userId,WebSocketSession session) {
        sessionMap.put(userId,session);
    }

    public static void remove(WebSocketSession session) {
        //从map中找到key，再remove key
        //sessionMap.remove(userAccount);
    }
}

（2）ws操作

package com.demo.security.ws;

import com.demo.security.dto.MsgDTO;
import com.demo.security.dto.UserDTO;
import com.demo.security.ws.constant.UserSessionConstant;
import com.fasterxml.jackson.databind.ObjectMapper;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

import java.io.IOException;

@Component
@Slf4j
public class UserWebSocketHandler extends TextWebSocketHandler {

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        //UserSessionConstant.add(session);
        log.info("user有新的连接，sessionId:{}",session.getId());
    }

    @Override
    public void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        // 处理接收到的消息
        log.info("user服务端Received message: {}",message.getPayload());
        String payLoad = message.getPayload();
        ObjectMapper objectMapper = new ObjectMapper();
        MsgDTO msgDTO = objectMapper.readValue(payLoad, MsgDTO.class);
        UserSessionConstant.add(msgDTO.getUserAccount(),session);
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        UserSessionConstant.remove(session);
        log.info("user连接已断开sessionId:{}",session.getId());
    }

    public void sendMessageToAll(String message) {
        for(WebSocketSession session : UserSessionConstant.getSessionMap().values()) {
            if (session.isOpen()) {
                try {
                    session.sendMessage(new TextMessage(message));
                    log.info("user发送消息给{}成功",session.getId());
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }

    public void sendMessageToUser(String message,String userAccount) {
        for(String sessionUserAccount : UserSessionConstant.getSessionMap().keySet()){
            if(!userAccount.equals(sessionUserAccount)){
                continue;
            }
            WebSocketSession session = UserSessionConstant.getSessionMap().get(userAccount);
            if (session.isOpen()) {
                try {
                    session.sendMessage(new TextMessage(message));
                    log.info("user发送消息给用户{}成功",userAccount);
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }
}

 （3）controller接口

package com.demo.security.controller;


import com.demo.security.dto.UserDTO;
import com.demo.security.ws.UserWebSocketHandler;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/userMsg")
public class UserMsgController {

    @Autowired
    private UserWebSocketHandler userWebSocketHandler;

    @RequestMapping("/send")
    public void sendMessage(UserDTO messageDTO) {
        userWebSocketHandler.sendMessageToUser(messageDTO.toString(),messageDTO.getUserAccount());
    }
}
2、测试

（1）

打开两个浏览器，分别登录zs、admin

后端断点可以看到map存储了两条数据：

（2）调用postman接口给zs发送消息：

查看浏览器，zs的账号接收到了消息，admin的没有接收到：

w_t_y_y
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
VUE使用WebSocket
m0_51431448的博客
12-24 1719
其实很简单的一个东西了，就想来记录一下，直接贴代码 <script> export default { data() { return { ws: '' } }, computed: { socketUrl: () => process.env.VUE_APP_WEBSOCKET_URL, }, mounted() { this.connectSocket() },
vue使用websocket
阿尔叭叭
08-21 749
在登录和退出的时候进行websocket进行建立连接和关闭连接。建立websocket.js。在需要用到websocket使用。
vue跨域使用websocket_vue使用websocket问题记录
weixin_36051633的博客
01-14 3952
最近笔者新参与的一个web项目，拟定采用vue2.0来编写，期间遇到有关使用websocket的问题，记录一下，个中遇到的一些问题和解决方法，分享给有需要的人。首先说一下vue2.0的初学体验，目前感觉上手还是很快的，对比其他框架比如angularjs，react等，的确是轻量级很多，并且确实如作者尤大大所诉，真实体会到了其渐进式前端解决方案的思想 ，你完全可以根据项目的实际情况，选择性的采用最适...
vue组件websocket服务器,vue 使用WebSocket 连接
weixin_30491017的博客
08-02 1835
什么是WebSocket？HTML5 WebSocketWebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。在 WebSocket A...
vue使用WebSocket连接
weixin_48399505的博客
05-09 1447
1.在store里面新建ws.js文件。2.登录时和退出时调用。
java加vue使用websocket_Java中使用webSocket
weixin_31690347的博客
02-27 232
Java中使用webSocketpackage com.yaoqi.controller.message;import javax.websocket.*;import javax.websocket.server.ServerEndpoint;import java.io.IOException;import java.util.concurrent.CopyOnWriteArraySet;/*...
Vue使用WebSocket
on1yLX的博客
08-08 626
上图对比可以看出，相对于传统HTTP每次请求-应答都需要客户端与服务端建立连接的模式，WebSocket是类似Socket的TCP长连接通讯模式。在海量并发及客户端与服务器交互负载流量大的情况下，极大的节省了网络带宽资源的消耗，有明显的性能优势，且客户端发送和接受消息是在同一个持久连接上发起，实时性优势明显。在开发方面，WebSocket API 也十分简单：只需要实例化 WebSocket，创建连接，然后服务端和客户端就可以相互发送和响应消息。以下简要介绍一下WebSocket的原理及运行机制。
vue使用websocket，protobuf搭建客服系统
true_peng的博客
03-07 506
websocket记录
java加vue使用websocket_springboot+vue实现websocket配置过程解析
weixin_39690105的博客
02-27 180
1.引入依赖org.springframework.bootspring-boot-starter-websocket1.3.5.RELEASE2.配置ServerEndpointExporter@Configurationpublic class WebSocketConfig {@Beanpublic ServerEndpointExporter serverEndpointExporter(...
java加vue使用websocket_Websocket在Vue中的使用
weixin_34385646的博客
02-27 571
1、初始化WebSocket对象为了兼容各个浏览器所以初始化的时候针对不同的浏览器初始化调用不同的方法。2、注册Websocket的url其中CONFIG.WEBSOCKET_URL为wensocket服务地址，_this.userData.user是登录用户的用户名，这样做为了保证不同用户的websocket地址的唯一性，防止消息发生混淆。3、增加心跳检测由于网络以及websocket自身的一些...
vue使用websocket的方法实例分析
12-04
本文实例讲述了vue使用websocket的方法。分享给大家供大家参考，具体如下： 最近项目需要使用到websocket 但是框架是vue 网上查阅很多资料 vue-websocket 老是连接不上 索性就不适用封装的插件了，直接使用原生的...
vue 实现websocket发送消息并实时接收消息
10-15
Vue项目中实现WebSocket进行消息的发送与接收涉及多个知识点。首先，WebSocket是一种网络通信协议，提供了浏览器和服务器全双工通信的能力，这意味着服务器可以主动向客户端发送信息。在Vue项目中，我们可以通过...
Ajax学习笔记
小陈从不熬夜
08-21 1072
Ajax学习笔记
Ajax快速入门
m0_52049533的博客
08-26 174
Ajax：异步的JavaScript和XML作用：给服务器发送请求，并获取服务器响应的数据；可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。：服务器处理请求时，客户端可以继续执行其他操作。
JavaScript - Ajax
qq_57620101的博客
08-20 514
Asynchronous JavaScript And XML，异步的JavaScript和XML不重新加载整个页面的情况更新部分网页。
普元EOS-微前端调用base基座的ajax
cuipy的博客
08-24 691
微前端调用EOS应用的服务或API，需要引入base基座，然后使用base基座中的ajax方法。本文将介绍微前端的高开和低开使用base基座的Ajax的方法。。
ant-design-vue-1.1.10-beta.zip
08-26
基于 Ant Design 和 Vue 的企业级 UI 组件库
基于flask实现的社交博客项目--《FlaskWeb开发》.zip
最新发布
08-26
基于flask实现的社交博客项目--《FlaskWeb开发》.zip
校园二手交易平台小程序源码 （优秀毕业设计源码）
08-26
1. 校园二手交易平台小程序代码说明：经导师指导并认可通过的98分毕设项目代码。 2.适用对象：本代码学习资料适用于计算机、电子信息工程、数学等专业正在做毕设的学生，需要项目实战练习的学习者，也适用于课程设计、期末大作业。 3.技术栈：java，项目代码都经过严格调试，代码没有任何bug！ 4. 作者介绍：大厂码农，java领域创作者，阿里云开发社区乘风者计划专家博主，专注于大学生项目实战开发，文章底部有博主联系方式，更多优质系统、项目定制请私信。 5. 最新计算机软件毕业设计选题大全: https://blog.csdn.net/weixin_45630258/article/details/135901374
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

w_t_y_y

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值