基于Socket.IO的客户端和服务端通信

Socket.IO是一个封装了 Websocket、基于Node 的 JavaScript 框架，包含 client 的 JavaScript 和 server 的 Node。为实时应用提供跨平台实时通信。其屏蔽了所有底层细节，让顶层调用非常简单。

接下来我们一起来搭建基于Socket.IO的服务端。

首先运行一下命令，生成一个package.json文件：

npm init -y

然后安装 express框架和socket.io：

npm  install  express  --save
npm  install  socket.io  --save

等这些工作都做好之后，我们就可以编写node代码，来创建一个WebSocket服务器了:

//server.js

let express = require('express');
let app = new express();
let server = require('http').createServer(app);
let io = require('socket.io').listen(server);
//将 socket.io 绑定到服务器上，于是任何连接到该服务器的客户端都具备了实时通信功能。

server.listen(8000);

app.use(express.static(__dirname + '/'));

app.get('/', function (req, res) {
    res.sendfile(__dirname + '/index.html');
});

//服务器监听所有客户端，并返回该新连接对象
io.sockets.on('connection', function (socket) {
    socket.emit('name', {username: 'litingting ' + new Date()});
    socket.on('my other event', function (data) {
        console.log(data +  new Date());

    });
});

客户端实现：

//html文件
<script src="/socket.io/socket.io.js"></script>
<script>
let socket = io();
socket.on('name', function (data) {
    alert(data.username);
    socket.emit('my other event', { my: 'data' });
});
</script>

在浏览器打开localhost:8000/即可看到运行结果。
demo地址

服务器和客户端都有 emit和on这两个函数，是socket.io的核心，通过emit和 on可以轻松地实现服务器与客户端之间的双向通信。

• emit ：用来发射一个事件或者说触发一个事件，第一个参数为事件名，第二个参数为要发送的数据，第三个参数为回调函数（一般省略，如需对方接受到信息后立即得到确认时，则需要用到回调函数）。

• on：用来监听一个 emit 发射的事件，第一个参数为要监听的事件名，第二个参数为一个匿名函数用来接收对方发来的数据，该匿名函数的第一个参数为接收的数据，若有第二个参数，则为要返回的函数。

socket.io提供了三种默认的事件（客户端和服务器都有）：connect 、message 、disconnect 。当与对方建立连接后自动触发 connect 事件，当收到对方发来的数据后触发 message事件（通常为socket.send() 触发），当对方关闭连接后触发 disconnect事件。

此外，socket.io 还支持自定义事件。

最后，需要注意的是，在服务器端区分以下三种情况：

• socket.emit() ：向建立该连接的客户端广播
• socket.broadcast.emit()：向除去建立该连接的客户端的所有客户端广播
• io.sockets.emit()：向所有客户端广播，等同于上面两个的和

参考资料：
第一章 socket.io 简介及使用
WebSocket 与 Socket.IO