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/

推荐阅读更多精彩内容