web-msg-sender v1.2.61

web-msg-sender

参考自 https://github.com/walkor/web-msg-sender

Web 消息实时推送

• ✅ 支持在线用户数实时统计和房间
• ✅ 支持脱离服务端编程
• ✅ 支持服务端登陆验证
• ✅ 使用 docker 一键部署

使用

使用 docker 镜像快速开始

推荐使用 docker 方式部署, 使用此命令在 linux 快速安装 docker:
curl https://get.docker.com | bash

直接部署

docker run -itd -p 8888:8888 trizau/web-msg-sender

允许客户端直接调用后端 API

docker run -itd -p 8888:8888 trizau/web-msg-sender -- --client-api=yes

可选参数

• --key= api 请求 key
• --cors=yes/domain 跨域配置
• --client-api=yes 允许客户端以 socket 方式直接调用后端 api
• --login-sign=yes 必须通过服务端进行登陆

前端代码

// yarn add socket.io-client
import { io } from "socket.io-client";
const socket = io("http://{you-host}:8888");
socket.on("connect", () => {
  // 在连接成功后 30 秒内需要登陆，否则将会断开连接
  // 同一个id被重复使用会断开之前的客户端
  // 使用 __ 前缀的id需要之前的客户端主动断开后才能继续使用
  socket.emit("login", "{id}", (res) => {
    if (res.code) {
      console.log("登陆失败: " + res.msg);
    } else {
      console.log("登陆成功: " + res.id);
    }
  }); // 可多次登陆来重命名id，同一个id只能有一个连接
});

socket.on("online-count", (count: number) => {
  console.log("当前在线人数: " + count);
});
socket.on("message", (msg: string) => {
  console.log("接收到socket消息: " + msg);
});

后端调用 api 向任意用户推送数据

可以通过任意语言的 curl 功能实现后台推送

POST http://{host}:{port}/{key}
Content-Type: application/json

{
   "msg": "要发送的消息",
   "user": "要发送给谁, 如果此字段为空则发送给所有人"
}

nginx 反向代理配置

location ~ ^/socket.io {
  proxy_pass http://web-msg-sender:8888;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  proxy_set_header Host $host;
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection "upgrade";
  break;
}

API

前端 socket

与服务器连接成功

on("connect", () => {});

与服务器断开了连接

on("disconnect", () => {});

当在线人数发生变化时

on("online-count", (count: number) => {
  console.log("当前在线人数: " + count);
});

房间内有人断开了连接

on("room-user-disconnect", (id: string) => {
  console.log("房间中的用户" + id + "断开了连接");
});

服务端发送了消息

on("message", (msg: any) => {
  console.log("接收到来自服务端端消息: " + msg);
});

发起登陆

emit(
  "login",
  "${id}",
  (
    res:
      | { code: 0; id: string; ip: string; time: string }
      | { code: number; msg: string }
  ) => {
    // code 非0则登陆失败， msg为错误说明
  }
);

在开启 --client-api=yes 之后可使用此方式请求后端 api (需要先登陆)

send({ msg: "向其他人发送消息" }, (res) => {
  if (res === "msg-send-success") {
    console.log("发送了一条消息");
  } else {
    console.log("消息发送失败");
  }
});

后端 API

交互使用 http 以 POST json 方式

发送消息

// req
{
  "msg": "要发送的消息",
  "user": "指定对象发送", // 可选
  "room": "指定房间发送" // 可选
}
// res
type result =
  "user-no-login" // 用户未登录, 只有在指定对象发送的时候才会出现
  | "msg-send-success" // 发送完成

加入/离开房间

// req
{
  "action": "join/leave", // 加入或离开房间
  "user": "用户", // 操作的用户，可同时操作多个用户，使用数组方式传递
  "room": "房间" // 要加入/离开的房间，可同时加入/离开多个房间，使用数组方式传递
}
// res
type result = {
  "用户id，如果不在此列表表示此用户不在线": ["此用户当前所在的房间号列表"]
}

获取在线用户

// req
{
  "action": "get-online", // 固定写法
  "room": "房间号" // 可选, 只查看指定房间的用户
}
// res
type result = string[]

必须通过服务端进行登陆

1. 服务端使用 --login-sign=yes 参数后，客户端登陆需要经过服务端的确认
2. 每次登陆时，需要请求

   {
     "action": "login",
     "user": "要登陆的用户名",
     "sign": "您创建的签名"
   }

3. 前端登陆改为

   emit("login", ["要登陆的用户名", "您创建的签名"], (res) => {
     // ...
   });

   签名创建后有效期为 30 秒或者被使用后失效