Socket.io 轻松处理 WebSocket
前言
静态网页的时代已经过去了。现在,用户想要动态内容的,像 App 一样体验的页面。并且,页面应该能够自动更新,而不是让用户自己去按 F5 然后重新加载整个页面。当然,这些需求大部分能够通过 JavaScript 的异步请求来实现。但是,如果现在服务器端有了新的数据,你该如何更新你的应用呢?
你可以通过 AJax 轮询的方式,但是这有很多弊端,比如占用大量带宽,占用大量服务器时间来处理这些不必要的请求,同时,这也给了心怀不轨的人 DDos 你服务器的机会,这些弊端都会让你的服务器变得巨慢。好在现在的 Web 技术发展得真的很快,这些问题都可以在迭代中出现了新的解决方案,那就是 WebSocket!
WebSocket 允许我们在 Web 客户端和服务器之间,建立一条有状态的链接。因此我们能够双向地传递数据。由于减少了大量的请求以及链接建立的损耗,WebSocket 比标准的 HTTP 请求要高效得多。
但不幸的是,WebSocket 在不同的浏览器上有一些差别,所以要做到跨浏览器地开发会有一些困难。而且,要知道,在一些老的浏览器上是不支持这项新技术的,这个时候我们又该怎么办?我们需要某种跨浏览器的 WebSocket 实现封装,他支持不同浏览器的 WebSocket 实现,并且在那些老旧的、不支持 WebSocket 的浏览器上,能够回退到传统方式运行,从而保证我们的应用能够稳定运行。Scoket.io 便是这么一个库,它不仅实现了以上所说的所有这些功能,而且还提供了很优美的 API,以及一些额外的实用功能。
安装
Socket.io 由两个部分组成:服务端和客户端,都使用 JavaScript 实现。我默认你已经安装了 Node.js 以及 NPM(如果没有,那你可以在网上找到成吨的教程)。
新建一个目录来存放服务端的代码然后运行 `npm package.json 文件。下一步,通过下面的命令将 Socket.io 添加到你的项目:
1 | npm install --save socket.io |
当然,我们也需要 express 框架来提供服务器的实现支持(当然你也可以用原生的方式)。安装也很简单:
1 | npm install --save express |
启动一个回传服务器(Echo Server)
那让我们从一个简单的例子开始吧。
我觉得,一个回传服务器应该足够简单也足够有效的来向你展示 Socket.io 如何使用,你也可以基于这个示例做出更加复杂的项目。
新建一个名为 server.js
的文件并且将下面的代码复制进去:
1 | var http = require('http') |
在开始的3行,我们 import
了一些需要用到的库。然后我们创建了一个 HTTP 服务器以及一个 express 应用,这样可以让我们更方便地管理路由。你可以点击了解更多关于 Express 的知识。同样,我们需要创建一个 Socket.io 的实例,并且将其分配给服务器,这样我们就能够使用 WebSocket 来进行通信了。
在下面的一行中,我使用了 express 来定义一个 / 路由,也就是根路由,一般用来返回我们的 index.html
文件的内容。然后,我使用了之前创建的 Socket.io 实例来监听连接请求事件。任何时候,只要有人通过 Socket.io 连接上本服务器,就会触发这个事件,然后调用回调函数。在回调函数中,我们使用了这个 socket 连接,通过这个连接,我们既能够从中读取数据也能够向其发送事件信息。
现在,我们来监听 echo
事件,并且在收到信息的时候,将信息原封不动的转发回去,主意,这里的 echo
事件名使我们自定义的,我们也可以不用主动定义,只是定义后能更方便的管理这些事件。
最后一行就很简单了,在本机的 8080
端口上启动了这个服务器。
客户端代码
在本地创建一个名为 index.html
的文件,然后将下面的代码粘贴进去:
1 |
|
你需要做的第一件事情便是引用 Socket.io 的库文件。这个文件是运行在我们的 Node.js 服务器上的。我这里是直接在 HTML 文件里面写的 JavaScript,为了方便展示,你在真正项目中可不要这样做。
在代码中,我通过 io()
这个方法创建了一个 socket 连向服务器。然后,我触发了 emmit 事件,并且传递了一个 test
字符串作为负载。现在,我们只需要用 node server.js
来启动我们的服务器程序,并且在浏览器中打开 http://localhost:8080/。你应该变能够在控制台中看到 this is a message
字样的输出。
总结
我认为,对于一个开发者来说,需要具备两项特质,一个是快速学习适应新技术的能力,第二个便是总是选择合适的工具完成任务。
Socket.io 真的非常好用也很简单。它让我们能够轻松地在几乎任何应用中享受 WebSocket 带来的好处。它值得被你放进工具集😼。