curTain

思路清晰的使用socket.io…..

引入:

先看官网api:

可以看见,主要有这三个对象:server,namespace和socket

如果你掌握了这三个对象,那么你就已经基本学会socket.io的使用了。

在服务端,我们会写出这样的socket.io服务端代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const Koa = require('koa')     // 引入koa
const app = new Koa() // 创建一个koa实例
// 引入http模块,并在Server函数中传入app的回调函数
const http = require("http").Server( app.callback() )
// 引入socket.io 传入http,并配置socket
const IO = require("socket.io")( http, {
pingTimeout: 1000 * 10,
pingInterval: 1000 * 2.5
})
// 默认命名空间("/")总线IO监听连接事件 当前IO为默认命名空间
IO.on( "connection", ( socket ) => {
// 当前socket连接收到event事件,触发callback函数
socket.on( "event", callBack )
// 向当前socket连接客户端触发event事件,返回数据sendData
socket.emit( "event", sendData )
})

// 相当于如下代码:
var mainSpace = IO.of("/")
mainSpace.on( "connection", ( socket ) => {
....
}

看了上面的代码,不难发现socket.io暴露两个对象供我们使用,一个是当前命名空间总线IO,一个是当前连接的socket,他们的关系如图:

这里就不得不说一下命名空间了

关于命名空间(namespace):

默认命名空间:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
amespace {
name: '/',
server:
Server {
nsps: { '/': [Circular] },
parentNsps: Map {},
_path: '/socket.io',
_serveClient: true,
parser:
{ protocol: 4,
types: [Array],
CONNECT: 0,
DISCONNECT: 1,
EVENT: 2,
ACK: 3,
ERROR: 4,
BINARY_EVENT: 5,
BINARY_ACK: 6,
Encoder: [Function: Encoder],
Decoder: [Function: Decoder] },
encoder: Encoder {},
_adapter: [Function: Adapter],
_origins: '*:*',
sockets: [Circular],
eio:
Server {
clients: {},
clientsCount: 0,
wsEngine: 'ws',
pingTimeout: 5000,
pingInterval: 25000,
upgradeTimeout: 10000,
maxHttpBufferSize: 100000000,
transports: [Array],
allowUpgrades: true,
allowRequest: [Function: bound ],
cookie: 'io',
cookiePath: '/',
cookieHttpOnly: true,
perMessageDeflate: [Object],
httpCompression: [Object],
initialPacket: [Array],
ws: [Object],
_events: [Object],
_eventsCount: 1 },
httpServer:
Server {
domain: null,
_events: [Object],
_eventsCount: 5,
_maxListeners: undefined,
_connections: 0,
_handle: null,
_usingSlaves: false,
_slaves: [],
_unref: false,
allowHalfOpen: true,
pauseOnConnect: false,
httpAllowHalfOpen: false,
timeout: 120000,
keepAliveTimeout: 5000,
_pendingResponseData: 0,
maxHeadersCount: null,
[Symbol(asyncId)]: -1 },
engine:
Server {
clients: {},
clientsCount: 0,
wsEngine: 'ws',
pingTimeout: 5000,
pingInterval: 25000,
upgradeTimeout: 10000,
maxHttpBufferSize: 100000000,
transports: [Array],
allowUpgrades: true,
allowRequest: [Function: bound ],
cookie: 'io',
cookiePath: '/',
cookieHttpOnly: true,
perMessageDeflate: [Object],
httpCompression: [Object],
initialPacket: [Array],
ws: [Object],
_events: [Object],
_eventsCount: 1 } },
sockets: {},
connected: {},
fns: [],
ids: 0,
rooms: [],
flags: {},
adapter: Adapter { nsp: [Circular], rooms: {}, sids: {}, encoder: Encoder {} } }

命名空间与socket

当前命名空间总线IO的总结

通过上面的命名空间的定义的代码,我们可以知道,在总线IO上,拥有所有连接的socket的信息,拥有所有的rooms信息,

故:

  1. 可以向指定房间里发送消息
  2. 可以向连接到当前命名空间里的所有socket发送消息
  3. 等…

官网api截图:

可知,总的是对room和连接的sockets进行操作。

当前连接socket总结:

个人总结

当理解了总线IO与当前连接的socket的关系后,就能思路清晰的写出优秀的的代码了。

写下这篇文章,希望对你有帮助,与君共勉!

参考资料:

socket.io官网

socket.io命名空间的详细解析

WebSocket协议-Socket.io 服务端API


 评论