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
});