io协议服务器,WebSocket协议-Socket.io 客户端API

客户端API

IO

如果使用的是标准化的JS库，则暴露为io这一命名空间；如果是用Node 编译，则使用require('socket.io-client')。

引入socket.io的JS库

const socket = io('http://localhost');

导入socket.io模块

const io = require('socket.io-client');

// or with import syntax

import io from 'socket.io-client';

io.protocol

数值型

表示协议版本号

io(url[, options])

url (字符串)连接的服务器url，默认的指向widnow.location

option (Object)forceNew (布尔型)是否重用当前已存在的链接。

Return Socket

const socket = io('http://localhost:8000')

io([url], [, options])

url (String) (defaults to window.location)

options (Object)

Returns Socket

重点说一下options中transports的配置。

使用socket.io默认情况下，首先建立长轮询连接，然后升级成websocket，也可以设置直接成websocket，这样设置后socket.io不能降级，不会根据当前环境自动选择最佳方式实现通讯。

//默认设置

const socket = io('http://localhost:8000', {transports: ['polling', 'websocket']});

//设置成websocket

const socket = io('http://localhost:8000', {transports: ['websocket']});

Socket

socket.id

字符串

标识socket session独一无二的符号，在客户端连接到服务端被设置。

const socket = io('http://localhost:8000');

console.log(socket.id); // undefined

socket.on('connect', () => {

console.log(socket.id); // 'G5p5...'

});

socket.connect()

Returns Socket

//手动打开socket

const socket = io({

autoConnect: false

});

// ...

socket.connect();

//socket断开重新连接

socket.on('disconnect', () => {

socket.connect();

});

socket.emit(eventName[, ...args][, ack])

eventName (String)向socket发送的事件名

args 向socket发送的参数

ack 响应服务器确认消息的应答

Returns Socket

socket.emit('add user', 'tobi', (data) => {

console.log(data); // receive data

});

// server:

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

socket.on('add user', ({userName}, fn) => {

fn('receive data');

});

});

socket.on(eventName, callback)

eventName (String)事件名

callback (Function)

Returns Socket

注册响应服务器事件的事件处理器

//客户端监听用户加入聊天室

socket.on('user joined', ({userName, count}) => {

})

socket.commpress([value])

value (布尔型)

Returns Socket

设置修改器，是否对向服务器传输的数据进行压缩。默认为true，即压缩。

socket.compress(false).emit('add user', { userName: 'ningxiaojie' });

socket.close()

Returns Socket

手动关闭客户端对服务器的链接

socket.disconnect()

用法同 socket.close()

Event

Event: 'connect'

连接成功后执行该函数

socket.on('connect', () => {

console.log('连接服务器成功')

})

Event: 'connect_error'

error (Object) 错误对象

连接错误时触发事件处理器。

socket.on('connect_error', (error) => {

// ...

});

Event: 'disconnect'

reason (String) 服务器或客户端断开连接的原因

断开连接时触发事件处理器

socket.on('disconnect', (reason) => {

// ...

});

Event: 'reconnect'

attempt (Num) 重连次数

重连成功时触发事件处理器

socket.on('reconnect', (attempt) => {

// ...

});

Event: 'reconnect_attempt'

attempt (Number) 重连次数

尝试重连时触发事件处理器

socket.on('reconnect_attempt', (attempt) => {

// ...

});

Event: 'reconnecting'

attempt (Number) 重连次数

尝试重连时触发事件处理器

socket.on('reconnecting', (attempt) => {

// ...

});

Event: 'reconnect_error'

error (Object) 错误对象

重连错误时触发事件处理器

socket.on('reconnect_error', (error) => {

// ...

});

Event: 'reconnect_failed'

重连失败时触发事件处理器

socket.on('reconnect_failed', () => {

// ...

});

下一篇讲述Socket.io 服务端API