下面我们去准备一个 WebSocket 客户端,在终端,项目所在目录的下面,可以先创建一个目录,名字叫 public,之前我们配置过,这个目录存储的是一些静态资源。 进入到这个目录的下面,然后用 curl 去下载一个脚本,加上一个 -O 选项。后面是这个要下载的脚本的地址。
这里我们下载的是 socket.io 的客户端需要的脚本文件。下载之后在项目的 public 里面,会看到这个 socket.io.js 。
然后打开 views 下面的这个 index.hbs 。在这个模板文件的 head 里面,可以嵌入一个脚本文件,文件的名字是 socket.io.js 。
在文档的主体部分,添加一组 script 标签,里面可以添加几行代码。先创建一个 socket ,添加一个 socket,用一下 io ,把 WebSocket 服务端地址交给这个函数。这里应该是 http://localhost:3000
下面可以测试一下连接到我们之前创建的 WebSocket 服务。有一下 socket 上的 on 这个方法,监听一个 connect 事件,提供一个回调方法,方法里面用 console.log 在控制台输出一条信息,Connected。
如果 WebSocket 客户端跟服务端成功连接了,就会在客户端的控制台上输出一个 Connected。
下面再用一下 socket 上的 on ,这次监听一下 disconnect ,提供一个回调参数,在这个方法里面,在控制台上输出一个 Disconnected。 如果客户端跟服务端断开了 WebSocket 连接,就会在客户端的控制台上输出这个 Disconnected。
回到浏览器,访问一下应用的根,然后打开控制台,在客户端的控制台上你会发现输出了这个 Connected,说明 WebSocket 客户端现在跟服务端成功连接到一块儿了。
再打开运行项目开发服务的终端,ctrl + C ,停止运行项目的开发服务。
然后再到浏览器上观察一下,你会发现,这里输出一个 Disconnected ,断开了连接,客户端会重新请求连接到 WebSocket 服务。
在终端,重新再运行一下项目的开发服务。 WebSocket 服务启动以后,浏览器的控制台上又会输出一个 Connected ,这就表示客户端跟服务端又成功的建立了一个 WebSocket 连接。