Socket.IO 客戶端 API IO

IO

創建方式

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

或者使用require或import

const io = require('socket.io-client');
// or with import syntax
import io from 'socket.io-client';

io.protocol

• Nubmer

協議修訂號

io([url][, options])

• url 默認為window.location
• options (Object) forceNew是否重用已存在的連接
• return Socket

為給定的URL創建一個Manager，並且在后續的調用中重用該連接，除非設置forceNew:true或'force new connection': true

查詢參數可以在query中提供，也可以在URL中提供

---

初始化例子

多路復用

默認情況下，連接到不同的命名空間使用單個連接，可以通過設置options的forceNew來禁用

const socket = io();
const adminSocket = io('/admin');
// a single connection will be established

const adminSocket = io('/admin', { forceNew: true });
// will create two distinct connections

const socket = io();
const socket2 = io();
// will also create two distinct connections

注意：重用相同的命名空間，將創建兩個連接

自定義路徑

const socket = io('http://localhost/admin', {
  path: '/mypath'
});

socket使用自定義路徑mypath連接到admin命名空間

請求地址如下：localhost/mypath/?EIO=3&transport=polling&sid=<id>

查詢參數

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

// server-side
const io = require('socket.io')();

// middleware
io.use((socket, next) => {
  let token = socket.handshake.query.token;
  if (isValid(token)) {
    return next();
  }
  return next(new Error('authentication error'));
});

// then
io.on('connection', (socket) => {
  let token = socket.handshake.query.token;
  // ...

});

通過scoket.handshake獲得握手細節信息

查詢選項

const socket = io({
  query: {
    token: 'cde'
  }
});

查詢內容可以在重新連接時更新

socket.on('reconnect_attempt', () => {
  socket.io.opts.query = {
    token: 'fgh'
  }
});

extraHeaders

僅在啟用輪詢時有效。使用websocket傳輸時，不會追加自定義header。這是因為websocket不支持自定義header

const socket = io({
  transportOptions: {
    polling: {
      extraHeaders: {
        'x-clientid': 'abc'
      }
    }
  }
});

// server-side
const io = require('socket.io')();

// middleware
io.use((socket, next) => {
  let clientId = socket.handshake.headers['x-clientid'];
  if (isValid(clientId)) {
    return next();
  }
  return next(new Error('authentication error'));
});

僅使用webscoket傳輸

默認情況下，先建立一個長輪詢連接，然后升級至“更好”的傳輸（就像websocket）

const socket = io({
  transports: ['websocket']
});

// on reconnection, reset the transports option, as the Websocket
// connection may have failed (caused by proxy, firewall, browser, ...)
socket.on('reconnect_attempt', () => {
  socket.io.opts.transports = ['polling', 'websocket'];
});

自定義解析器

服務器和客戶端需要使用同一種解析器方便解析

const parser = require('socket.io-msgpack-parser'); // or require('socket.io-json-parser')
const socket = io({
  parser: parser
});

// the server-side must have the same parser, to be able to communicate
const io = require('socket.io')({
  parser: parser
});

自簽名證書

// server-side
const fs = require('fs');
const server = require('https').createServer({
  key: fs.readFileSync('server-key.pem'),
  cert: fs.readFileSync('server-cert.pem')
});
const io = require('socket.io')(server);
server.listen(3000);

// client-side
const socket = io({
  // option 1
  ca: fs.readFileSync('server-cert.pem'),

  // option 2. WARNING: it leaves you vulnerable to MITM attacks!
  rejectUnauthorized: false
});