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 的有效性。如果验证通过,则可以向客户端发送消息。