STACK = websocket & socketIO

Websocket

1. Push mechanism

• pooling

• websocket

2. Websocket vs Http

• websocket 一開始需要 http建立連接, 之後就不用http了

	HTTP	Websocket
Pattern	request-response	bi-direction
# parallel connections	~10 per server	1024
Load balancing || proxy	Standard	Complex
Support on all browsers	YES (100%)	~YES(90%)
Drop client detection	No	Yes
Overhead	Moderate overhead per request-response	Moderate overhead to establish connection, minimum overhead per message
protocl	Level 7	Level 7

SocketIO

1. Basic

1.1. Server in node.js

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const axios = require('axios');

const port = 4001;
const index = require('./routes/index');

const app = express();
app.use(index);
const server = http.createServer(app);
const io = socketIo(server);

// socket-io
io.on('connection', socket => {
  console.log('New connection');

  socket.emit('init data', { data: '123' }); // server emits to clients

  socket.on('disconnect', () => console.log('Client disconnected')); // on client
});

// REST
app.post('/status', (req,res) => {
  ...
  io.emit('update data',{ data: newData });
  res.send('OK');
});

// Server
server.listen(port, () => console.log(`Listening on port ${port}`));

1.2. Client in react.js

class App extends Component {
  constructor(props) {
    super(props);
    ...
  }

  componentDidMount() {
    this.socket = socketIOClient(ENDPOINT);
    this.socket.on('read data', this.handleReadData);
  }

  onSend() {
    return () => {
      ...
      this.socket.emit('send idxs to process', { idxs });
    };
  }

  ...
}

2. Advance

private communication

broadcast

namespaces & rooms