前端技术:使用Socket.IO实现WebSocket通信

Socket.io是一个简单的小类库,本篇文章将讲解如何使用Socket.io类库,如何在服务器端和客户端使用 Socket.io类库,以及常用的方法,怎么创建一个Socket.io服务器,如何在服务器和客户端之间互相发送消息和事件,实现双向通信。

Socket.io类库可以接收所有与服务器端相连接的客户端发送的消息,也可以像这些客户端发送消息,主要是在服务器端和客户端之间建立一个共享的接口,也就是当客户端和服务器端连接成功之后,在处理消息的过程中,我们可以在客户端使用服务器端的JS代码。

首先,Socket.io是nodeJS的一个第三方模块,我们需要使用它,首先要把它下载下来。代码如下:npm install socket.io

下载完成之后,我们建立一个JS文件 server.js 在JS文件中,引入Socket.io模块,代码如下:var sio = require('socket.io');

然后,我们就可以开始使用了,它是使用方法比较简单,只需要创建一个 Socket.io服务器即可,这个服务器依赖已经创建好的http服务器,所以首先,我们需要建立一个http服务器,然后 再使用 socket的 listen方法,创建一个 Socket.io服务器,代码如下:

当我们调用 sio.listen()方法,建立好服务器之后,当客户端和服务器端建立连接时,触发Socket.IO服务器的 connection 事件(连接事件),可以在服务器端监听这个事件,且在事件的回调函数中,输出一些提示信息到控制台,也可以往前端发送一些信息,只要触发了这个事件,就证明客户端和服务器端连接成功了,当然客户端的代码,也需要经过对应的处理,这里 客户端的代码是 index.html,我们在这个文件里面,和服务器端建立连接,服务器端监听连接事件 connection 的代码如下:

首先,如果进入到事件 connection的回调函数,证明客户端和服务器端已经建立连接,所以打印一下提示信息,输出到控制台,提示客户端已经建立连接了,然后,服务器端给客户端发送一条信息,"你好", 同时,在这个连接里面,还监听了 message 事件和 disconnect事件,message事件,主要是服务器端接收客户端传过来的数据,如果客户端有数据到服务器端,就会触发message事件, 那么在回调里面,服务器端就可以接收到客户端发送的数据了, 而 discounnect 事件是简单的客户端断开连接事件,如用户刷新浏览器 或 关闭页面,客户端就会断开连接。

当然,服务器端的代码写好了以后,客户端也要写相对应的代码,代码如下:

首先通过 src 引入了 /socket.io/socket.io.js,这里不需要在客户端实际的放置一个socket.io.js文件,这个文件由服务器端自动提供,服务器端引入,启动服务器自动就有了。

然后,在18行代码处,和服务器端建立连接,建立连接以后,可以监听message事件,事件的回调函数中,就可以获取到服务器端发送过来的信息了,当然,也可以使用send()方法发送信息给服务器,我们这里发送了一条"消息已收到"给服务器。那么服务器可以在控制台输出该条信息。当然如果由于服务器异常,断开了连接,在客户端同样的可以点击 disconnect事件,给用户一些提示,服务器连接断开。

那么至此,客户端和服务器端已经可以正常的通信了。

在使用Socket.io类库时,服务器和客户端之间,除了可以互相发送消息之外,也可以使用 socket 端口对象的 emit 方法互相发送事件,注意,无论是服务端还是客户端 使用emit()方法触发的事件,都需要在另一端,使用 on 来监听事件,在监听的回调函数里面,就可以接收事件传入的参数。 代码如下:

服务器端代码:

客户端代码:

如上代码所示:服务器端触发了news事件且传入数据,那么在客户端,使用on来监听news事件,器而在回调里面接收数据,然后,客户端触发了 my other event事件 传入数据,服务器端通过on来监听接收,且在接收的回调函数里面,接收数据。当然,也可传入多个参数,如服务器端触发了 setName事件 传入了几个参数, 其中最后一个参数是回调函数,那么客户端通过 on监听到以后,可以接收数据,也可以通过回调,把客户端的一些信息,传递到服务器端。

以上,我们就用 Socket.io 模块,完整的实现了客户端和服务器端的双向通信。Socket.io在一些即使通信类的应用中还是比较有价值的,如直播聊天室之类的应用。完全可以使用Socket.io来实现。所以,掌握它非常的有必要。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190116A09D0E00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券