React全家桶+WebSocket實現簡單聊天室

數據通信的方式有很多種，其中websocket就是一種用於IM的常用數據通信方式，如在線客服、QQ、微信等，或多或少都使用到了這一技術。所以瞭解以及掌握websocket是很有必要的

廢話不多說，先上圖：

認識WebSocket

WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。

WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，並進行雙向數據傳輸。

在 WebSocket API 中，瀏覽器和服務器只需要做一個握手的動作，然後，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。

在實現過程衝，由於原生的WebSocket存在兼容問題，所以一般在真正項目開發中，往往會用到一些三方常用的庫，如socket.io、socket.io-client等。

服務器端

簡單地通過nodejs+koa+socket.io去進行模擬實現，其代碼如下:
server.js

const http=require('http');
const Koa=require('koa');
const io=require('socket.io');
const uuid=require('uuid/v4');

//
let server=new Koa();

//
let httpServer=http.createServer(server.callback());
httpServer.listen(8080);

//
let wsServer=io.listen(httpServer);

wsServer.on('connection', sock=>{
  console.log('connected');

  const ID=uuid();

  sock.emit('ID', ID);

  sock.on('msg', (user, msg)=>{
    wsServer.emit('broadcast', ID, user, msg);
  });
});

客戶端

客戶端主要有三部分組成：登錄、發送消息、展示消息，其中登錄對於的組件是Login.js,消息相關的組件是Msg.js。看下項目整體目錄機構：

.
+-- _config.yml
+-- _drafts
|   +-- begin-with-the-crazy-ideas.textile
|   +-- on-simplicity-in-technology.markdown
+-- _includes
|   +-- footer.html
|   +-- header.html
+-- _layouts
|   +-- default.html
|   +-- post.html
+-- _posts
|   +-- 2007-10-29-why-every-programmer-should-play-nethack.textile
|   +-- 2009-04-26-barcamp-boston-4-roundup.textile
+-- _data
|   +-- members.yml
+-- _site
+-- index.html