vue3使用WebSocket实现实时判断用户登录状态

在 Vue3 中使用 WebSocket 实现用户登录状态的判断，可以按照以下步骤进行：

1. 安装 WebSocket 库：如果你还没有 WebSocket 库，可以安装一个，比如 socket.io-client。

   npm install socket.io-client
   

2. 创建 WebSocket 服务：在服务器端实现一个 WebSocket 服务，用于处理用户登录状态的管理。这里假设你已经有一个 WebSocket 服务在运行。

3. 在 Vue3 中使用 WebSocket：

   • 创建一个 WebSocket 服务文件 socket.js。
   • 在 Vue 组件中引入并使用 WebSocket 服务。

以下是具体实现步骤：

创建 WebSocket 服务文件

首先，在 src 目录下创建一个 socket.js 文件，用于管理 WebSocket 连接。

// src/socket.js
import { io } from "socket.io-client";

const socket = io("http://your-websocket-server-url"); // 替换为你的 WebSocket 服务器地址

socket.on("connect", () => {
  console.log("WebSocket connected");
});

socket.on("disconnect", () => {
  console.log("WebSocket disconnected");
});

export default socket;

在 Vue 组件中使用 WebSocket

然后，在需要判断用户登录状态的组件中使用 WebSocket。例如，在 App.vue 中：

<template>
  <div id="app">
    <h1 v-if="isLoggedIn">欢迎回来，用户！</h1>
    <h1 v-else>请登录</h1>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';
import socket from './socket';

export default {
  name: 'App',
  setup() {
    const isLoggedIn = ref(false);

    onMounted(() => {
      // 监听用户登录状态的消息
      socket.on('userLoggedIn', () => {
        isLoggedIn.value = true;
      });

      socket.on('userLoggedOut', () => {
        isLoggedIn.value = false;
      });

      // 检查当前用户是否已登录
      socket.emit('checkLoginStatus', (status) => {
        isLoggedIn.value = status;
      });
    });

    onUnmounted(() => {
      // 清除事件监听
      socket.off('userLoggedIn');
      socket.off('userLoggedOut');
    });

    return {
      isLoggedIn,
    };
  },
};
</script>

服务器端实现

确保服务器端实现了相应的 WebSocket 逻辑，以下是一个简单的 Node.js 示例：

// server.js
const io = require('socket.io')(3000);

io.on('connection', (socket) => {
  console.log('New client connected');

  // 监听用户登录请求
  socket.on('login', () => {
    // 执行登录逻辑
    socket.emit('userLoggedIn');
  });

  // 监听用户登出请求
  socket.on('logout', () => {
    // 执行登出逻辑
    socket.emit('userLoggedOut');
  });

  // 检查登录状态
  socket.on('checkLoginStatus', (callback) => {
    const isLoggedIn = false; // 在这里判断用户是否已登录
    callback(isLoggedIn);
  });

  socket.on('disconnect', () => {
    console.log('Client disconnected');
  });
});

这样，你就可以通过 WebSocket 来实时判断用户的登录状态，并在 Vue3 应用中进行响应。