TypeScript

从 v3 开始，Socket.IO 现在对TypeScript具有很好的支持。

服务器

首先，声明一些类型：

  1. interface ServerToClientEvents {
  2.   noArg: () => void;
  3.   basicEmit: (a: number, b: string, c: Buffer) => void;
  4.   withAck: (d: string, callback: (e: number) => void) => void;
  5. }
  7. interface ClientToServerEvents {
  8.   hello: () => void;
  9. }
  11. interface InterServerEvents {
  12.   ping: () => void;
  13. }
  15. interface SocketData {
  16.   name: string;
  17.   age: number;
  18. }

并在创建服务器时使用它们：

  1. const io = new Server<
  2.   ClientToServerEvents,
  3.   ServerToClientEvents,
  4.   InterServerEvents,
  5.   SocketData
  6. >();

然后，从 IDE 的帮助中获益！

ServerToClientEvents在发送和广播事件时使用接口中声明的事件：

  1. io.on("connection", (socket) => {
  2.   socket.emit("noArg");
  3.   socket.emit("basicEmit", 1, "2", Buffer.from([3]));
  4.   socket.emit("withAck", "4", (e) => {
  5.     // e is inferred as number
  6.   });
  8.   // works when broadcast to all
  9.   io.emit("noArg");
  11.   // works when broadcasting to a room
  12.   io.to("room1").emit("basicEmit", 1, "2", Buffer.from([3]));
  13. });

ClientToServerEvents接收事件时使用接口中声明的那些：

  1. io.on("connection", (socket) => {
  2.   socket.on("hello", () => {
  3.     // ...
  4.   });
  5. });

接口中声明的InterServerEvents用于服务器间通信（于socket.io@4.1.0添加）：

  1. io.serverSideEmit("ping");
  3. io.on("ping", () => {
  4.   // ...
  5. });

最后，SocketData type 用于键入 socket.data 属性 （于socket.io@4.4.0添加）：

  1. io.on("connection", (socket) => {
  2.   socket.data.name = "john";
  3.   socket.data.age = 42;
  4. });

TypeScript - 图1警告

这些类型提示不会取代输入的正确验证/清理。像往常一样，永远不要相信用户输入。

客户端

在客户端，您可以重用相同的ServerToClientEvents 和 ClientToServerEvents 接口：

  1. import { io, Socket } from "socket.io-client";
  3. // please note that the types are reversed
  4. const socket: Socket<ServerToClientEvents, ClientToServerEvents> = io();

同样，在ClientToServerEvents发送事件时使用接口中声明的事件：

  1. socket.emit("hello");

ServerToClientEvents并且在接收事件时使用声明的那些：

  1. socket.on("noArg", () => {
  2.   // ...
  3. });
  5. socket.on("basicEmit", (a, b, c) => {
  6.   // a is inferred as number, b as string and c as buffer
  7. });
  9. socket.on("withAck", (d, callback) => {
  10.   // d is inferred as string and callback as a function that takes a number as argument
  11. });

Custom types for each namespace

Since each Namespace can have its own set of events, you can also provide some types for each one of them:

  1. import { Server } from "socket.io";
  3. // types for the main namespace
  4. const io = new Server<ClientToServerEvents, ServerToClientEvents, InterServerEvents, SocketData>();
  6. // types for the namespace named "/my-namespace"
  7. interface NamespaceSpecificClientToServerEvents {
  8.   foo: (arg: string) => void
  9. }
  11. interface NamespaceSpecificServerToClientEvents {
  12.   bar: (arg: string) => void;
  13. }
  15. interface NamespaceSpecificInterServerEvents {
  16.   // ...
  17. }
  19. interface NamespaceSpecificSocketData {
  20.   // ...
  21. }
  23. const myNamespace: Namespace<
  24.   NamespaceSpecificClientToServerEvents,
  25.   NamespaceSpecificServerToClientEvents,
  26.   NamespaceSpecificInterServerEvents,
  27.   NamespaceSpecificSocketData
  28.   > = io.of("/my-namespace");
  30. myNamespace.on("connection", (socket) => {
  31.   socket.on("foo", () => {
  32.     // ...
  33.   });
  35.   socket.emit("bar", "123");
  36. });

And on the client side:

  1. import { io, Socket } from "socket.io-client";
  3. const socket: Socket<
  4.   NamespaceSpecificServerToClientEvents,
  5.   NamespaceSpecificClientToServerEvents
  6. > = io("/my-namespace");
  8. socket.on("bar", (arg) => {
  9.   console.log(arg); // "123"
  10. });