WebSocket协议-Socket.io 客户端API

客户端API

IO

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

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io('http://localhost');
</script>

导入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

参考文档： https://socket.io/get-started/chat/