socket.io 权限认证

socket.io 是一款流行的 WebSocket 库，提供了实时双向通信的能力。它支持多种身份验证方式，可用于保护某些敏感信息。接下来，我们将介绍如何使用 socket.io 权限认证

1. 安装依赖

首先，我们需要在客户端和服务端分别安装所需的依赖库。

在服务端，我们使用 koa 作为 HTTP 服务器，使用 socket.io 库实现 WebSocket 服务。我们还需要安装 koa 和 koa-socket-2 中间件。

npm install  socket.io koa jsonwebtoken

在客户端，我们使用 vue3 作为前端框架，使用 socket.io-client 库实现 WebSocket 客户端。我们还需要安装 vue 和 socket.io-client 依赖。

npm install vue socket.io-client

2. 启动服务

在服务端，我们使用 koa 和 koa-socket-2 中间件初始化并启动服务器，实现 WebSocket 服务。我们还需要编写 JWT 鉴权的中间件函数。将它们组合起来，我们有以下代码。

import Koa from 'koa';
import jwt from 'jsonwebtoken';
import { createServer } from "http";


const app = new Koa();
const httpServer = createServer(app.callback());
// 启用跨域支持
const io = new Server(httpServer, { 
  cors: {
    origin: ["http://localhost:8001"]
  }
 });

const JWT_SECRET = 'your-secret-key';
 io.use((socket, next) => {
  const token = socket.handshake.auth.token;
  jwt.verify(token, JWT_SECRET, (err, decoded) => {
    if (err) {
      const error = new Error("socket没有权限");
      error.data = { content: "Please retry later" };
          // 校验失败，断开连接
      socket.disconnect();
      next(error);
    }else{
      console.log("socket获取到用户信息:",decoded);
      next();
    }
  });
});


io.on('connection', (socket) => {
  
});

httpServer.listen(3008, () => {
  console.log("服务启动成功: http://localhost:3000");
});

在客户端使用 socket.io-client 连接到服务端，发送 JWT Token，并监听服务端的事件。

<template>

<div>



</div>

</template>

<script setup>

import { ref, onMounted } from 'vue';

import socketio from 'socket.io-client';

const socket = socketio('http://localhost:3000', {

auth: { token: 'your-jwt-token' }

});
socket.on("connect", () => {
   
});
socket.on("connect_error", (err) => {
  console.log(err.message); 
});
</script>

3. 配置鉴权

我们使用 JWT Token 实现了身份验证。在客户端连接服务器时，我们在查询字符串中包含 JWT Token。在服务器端，我们使用 jsonwebtoken 中间件验证 JWT Token 的有效性。如果验证通过，则可以向客户端发送消息。