React版我画你猜
之前有看到过一个Vue版本的 我画你猜
然后用 React
也做了一个。技术栈:React + Nodejs + Socket.io + Webpack + Less
先上传送门Github,你要是敢给我Star!!!我就敢接受!!有啥问题可以在下面留言或者github issue一起进步
主要注意下面几点:
1.Socket.io在express中的问题
具体可以参考官方,Socket.io;
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',@H_404_39@function(socket) {
//接收path
socket.on('drawPath',@H_404_39@function(data) {
socket.broadcast.emit('showPath',data);
});
socket.on('submit',@H_404_39@function(keyword) {
@H_404_39@var bingo = 0;
@H_404_39@if (KEYWORD.toLocaleLowerCase() == keyword.toLocaleLowerCase()) {
bingo = 1;
}
socket.emit('answer',{
bingo
});
});
socket.on('message',@H_404_39@function(message){
@H_404_39@if(message == 'getKeyWord'){
KEYWORD = keyword[Math.floor(Math.random() * keyword.length)];
socket.emit('keyword',KEYWORD);
}@H_404_39@else @H_404_39@if(message == 'clear'){
socket.emit('showBoardClearArea');
}
});
socket.on('disconnect',@H_404_39@function() {});
});
写完之后没有整理,比较乱。就是想大概实现一下,有兴趣的自己看吧!做了亏心事背景要灰一点。。。。
Installation
git @H_404_39@clone https://github.com/zhoulijie/draw-something.git
Run
//安装依赖
npm install
//run
npm start