菜单 搜索
首页 前端知识 VUE使用websocket

VUE使用websocket

2024-09-29 22:09:54 前端知识 前端哥 93 353 我要收藏

在之前搭建好的项目的基础上新版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的没有接收到：

转载请注明出处或者链接地址：https://www.qianduange.cn//article/18743.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

jQuery 基础知识总结（超级详细）

2024-10-29 23:10:44

jQuery QueryBuilder 教程

2024-10-29 23:10:44

AJAX学习笔记6 JQuery对AJAX进行封装

2024-10-29 23:10:33

JavaScript云LIS系统概述 前端框架JQuery EasyUI Bootstrap医院云HIS系统源码 开箱即用

2024-10-29 23:10:27

基于HTML电商购物项目的设计与实现——html css javascript jquery bootstarp响应式图书商城

2024-05-07 13:05:13

echarts两个常用饼图、平滑折线图效果展示、代码参考

2024-10-29 23:10:13

水球图 及各种参数设置

2024-10-29 23:10:13

Echarts实现折现图跳过没有数据的点

2024-10-29 23:10:09

盘点初次使用vue3遇到的那些小坑

2024-10-29 23:10:07

echarts自定义tooltip中的内容

2024-10-29 23:10:04

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
3

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
4

vue使用datav echarts

2024-09-06 00:09:381000
5

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
6

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
7

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
8

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
9

npm的使用

2024-08-18 00:08:131000
10

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！