React+Nodejs+Socket+Webpack版你画我猜

最新推荐文章于 2022-11-08 20:43:59 发布

原创最新推荐文章于 2022-11-08 20:43:59 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#nodejs #socket #react

node 同时被 2 个专栏收录

4 篇文章

订阅专栏

react

2 篇文章

订阅专栏

本文介绍了一个使用React实现的在线绘画游戏“我画你猜”。该应用采用React结合Node.js、Socket.io等技术栈搭建，实现了多人在线互动的游戏体验。文章提供了项目的GitHub链接，并详细记录了开发过程中关于Socket.io在Express中的应用及客户端引入等问题。

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', 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