AnyChat

Server Side

How server works ?

• node.js
• pm2

Server Api

(socket.io)

port 1733

Server Monitor

(client)

port 1743

Phone

(client)

Phone

(client)

connect, join, send, disconnect

Message

Broadcast

send client list

socket.on('join', data => {
    const jwtToken = data.accessToken;
    jwt.verify(jwtToken.replace(/^Bearer\s/, ''), JWT_TOKEN, async (err, payloads) => {
      if (err) {
        return;
      }
      
      // push user into user list
    });
}):

Client Join Server (via Facebook)

Server API

if (sender) {
  socket.broadcast.emit('receive', {
      id: sender.payloads.id || 1,
      avatar: sender.payloads.avatar,
      name: sender.payloads.name || '江西拿',
      content: `[ ${sender.payloads.name || sender.payloads.id} ]: ${data.content}`,
  });
}

Message Broadcasting

Server API (cont.)

socket.on('disconnect', () => {
      const leaveIndex = userList.findIndex((s) => s.socketId === socket.id);
      if (leaveIndex >= 0) userList.splice(leaveIndex, 1);

      io.emit('disconnection', {
        content: `-- [ ${socket.handshake.query.name || socket.id} ] disconnected --`,
        list: userList,
      });
    });

Client Disconnect

Server API (cont.)

componentWillMount() {
    socket.on('connected', (data) => {
      this.setState({
        receive: [
          ...this.state.receive,
          data.content,
        ],
      });
    });
    socket.on('checkUser', (data) => {
      this.setState({
        clients: data.list,
      });
    });
    socket.on('receive', (data) => {
      this.setState({
        receive: [
          ...this.state.receive,
          data.content,
        ],
      });
    });
    socket.on('disconnection', (data) => {
      this.setState({
        receive: [
          ...this.state.receive,
          data.content,
        ],
        clients: data.list,
      });
    });
  }

Server  Monitor

• connected
• check user
• receive
• disconnection

const socket = io.connect('http://localhost:1733', {
  query: 'name=Server',
});