Socket.io：让 Web Sockets 变得轻而易举！

这周，我决定学习一下 websocket，因为它太酷了。根据MDN的说法，websocket“能够在用户浏览器和服务器之间建立交互式通信会话”。换句话说，你可以使用 websocket 轻松构建多个用户实时通信的应用程序。Socket.io 是实现 websocket 的最知名 JavaScript 库之一，所以我决定在我的项目中使用它。

我只想说，Socket.io 太棒了。它让用 WebSocket 编写应用程序变得超级简单快捷，而且我不需要写太多额外的代码——事实上，它可能比发送一个简单的 AJAX 请求还要简单。

学习过程

我首先学习了Socket.io 网站上的教程——大约 20 行代码就能搞定一个功能齐全的 websocket 应用！它帮助我理解了库的流程和语法。构建这个应用的过程出奇地简单——不知为何，websocket 对我来说一直很吓人，我以为它会难用得多！看完那个教程后，我感觉自己动手做点东西已经很轻松了。

最终项目

去年愚人节，Reddit 推出了一款名为 /r/place 的应用，允许用户协作创作像素艺术。以下是该应用的延时摄影效果。与世界各地的人合作创作这幅作品非常有趣，总的来说，这是一个非常酷的项目。

我决定使用 React 作为前端、Express 作为后端、Socket.io 进行通信来构建该应用程序的更简单版本。

Socket.io 与 React 的集成也出乎意料地简单。我最终在 React 的componentDidMount生命周期方法中添加了事件监听器，类似于 AJAX 请求的放置位置。总而言之，Socket.io 的代码非常简单。我的 Express 应用的 app.js 文件如下——它只是监听连接和像素颜色变化。在其下方，我附加了 React 应用的 App.js 文件。如果这是一个完整的项目，我会进一步清理 React 代码，但对于这种一次性项目，我并没有费心。后端和前端代码托管在 GitHub 上！该应用程序也已在线部署，所以和你的朋友一起玩吧！

websockets 的优点在于，我可以打开两个选项卡，或者告诉我的一个朋友使用该应用程序，他们的像素编辑也会显示在我的应用程序上，如下所示：

最后的想法

Socket.io 和 WebSocket 的易用性再次让我震惊。我一定会继续用它们来构建实时数据流交互程序。我喜欢最终项目的成果，并且整个构建过程非常愉快！

我的“学习新事物”系列的一部分