前端技术：使用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服务器，代码如下：

image

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

image

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

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

image

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

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

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

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

服务器端代码：

image

客户端代码：

image

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

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