React版我畫你猜

之前有看到過一個Vue版本的 我畫你猜 然後用 React 也做了一個。技術棧：React + Nodejs + Socket.io + Webpack + Less

先上傳送門Github，你要是敢給我Star!!!我就敢接受!!有啥問題可以在下面留言或者github issue一起進步

主要注意下面幾點：

1.Socket.io在express中的問題

2.Socket.io-client

index.html中，我在開頭引入了./node_modules/socket.io-client/socket.io.js,如果路徑變更記得修改，主要是出於對socket.io的不熟悉，不知道怎麼樣在react中通過import方式去引入，有好的做法歡迎提出。

3.其他

寫在最後，還是那句，第1次接觸Websocket，不知道socket.io有沒有雙向傳送訊息的機制，所以在server.js中你會看到來來回回了好幾次。

io.on('connection', function(socket) {
    //接收path
    socket.on('drawPath', function(data) {
        socket.broadcast.emit('showPath', data);
    });

    socket.on('submit', function(keyword) {
        var bingo = 0
 
;
        if (KEYWORD.toLocaleLowerCase() == keyword.toLocaleLowerCase()) {
            bingo = 1;
        }
        socket.emit('answer', {
            bingo
        });
    });

    socket.on('message', function(message){
        if(message == 'getKeyWord'){
            KEYWORD = keyword[Math.floor(Math
 
.random() * keyword.length)];
            socket.emit('keyword', KEYWORD);
        }else if(message == 'clear'){
            socket.emit('showBoardClearArea');
        }
    });

    socket.on('disconnect', function() {});
});

寫完之後沒有整理，比較亂。就是想大概實現一下，有興趣的自己看吧！做了虧心事背景要灰一點。。。。

Installation

git clone https://github.com/zhoulijie/draw-something.git

Run

//安裝依賴
npm install
//run
npm start