socket.io -- 通信

WebSocket

WebSocket 是一种网络通信协议，很多高级功能都需要它。HTTP协议有一个缺陷，通信只能由客户端发起。而Websocket协议在2011年成为国际标准。所有浏览器支持了。它最大的特点是：

服务器可以主动向客户端推送消息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

目前所有的主流Web语言都有对WebSocket做很好的支持，其中也有很多优秀的通讯框架可以任你挑选，因此万万不可畏惧它的存在，除非你真的想用Ajax轮询去解决消息I/O。WebSocket会使得你的消息接受和传递变得极其轻松，最重要的一点是，性能卓绝。WebSocket的建立非常简单

官网： https://socket.io/

Server API (服务端)：https://socket.io/docs/server-api/

Client API (客户端)：https://socket.io/docs/client-api/

服务端

Server 类

通过http.createServer创建服务，再通过io = require('socket.io')(server)返回Server类(即：io就是Server类)。

1. 创建Server类(socket.io的初始化实例)

1). Node http server

Server(app.js)

// 引入node.js的内置http模块var http = require('http') // 创建http.server实例，返回Server类。 //handler是带有两个参数(req, res)的函数,会自动添加到request事件var server = http.createServer(handler);//引入socket.io模块，并进行socket.io的实例初始化var io = require('socket.io')(server); //引入Node.js的fs文件系统模块var fs = require('fs'); //监听 HTTP 服务器的连接function server.listen(80);  //创建http.server实例的回调函数 handler (req, res) {    // __dirname : Node.js的全局常量，是运行当前文件的目录路径；读取指定目录下的文件     fs.readFile(__dirname + '/index.html', function (err, data) {       //回调函数           if (err) {                     res.writeHead(500);                     return res.end('Error loading index.html');          //如果指定data,则相当于调用response.write(data)    }    // 发送一个响应头(响应头包括：状态码、可选的状态描述、可选的响应头对象)给请求。        res.writeHead(200);        res.end(data);        // res.end()通知服务器，所有响应头和响应主体都已经被发送。        });}//对客户端发起连接  io.on('connection', function (socket) { //socket === 返回的Socket类});

2). Express 3/4

Server(app.js  | bin/www)

var app = require('express')();var server = require('http').Server(app);var io = require('socket.io')(server);server.listen(80);io.on('connection', function (socket) {  //返回的Socket类});    

3). Express 2.x

Server(app.js)

var app = require('express').createServer();var io = require('socket.io')(app);app.listen(80);io.on('connection', function (socket) {  //返回Socket类}); 

2. Server类的常用属性方法

1). io.sockets

io.sockets返回Namespace类；Namespace类表示为在指定的pathname(即在socket.io创建实例时的path,默认是'/')的范围内，所连接的所有socket类对象。

属性作用：可通过socket类对应的id找到相应的socket类，然后给指定的socket类的客户端发送event;

2). io.of(nsp)

· nsp: String 路径标识符

· 返回 Namespace

作用：

Socket （类） -- 连接成功返回socket类作为回调函数的参数

简介：

Socket类是服务端与浏览器客户端的基本的交互类。属于一个命名空间，使用底层客户机进行通信的。

需要注意的是：Socket并没有直接与实际的底层TCP/IP socket相关，它仅仅是一个类的名。

在每个命名空间中，还可以定义任意通道(所谓的 room)，这些通道中，Socket类可以连接和断开，提供简便的方法进行broadcast(传播)到一个组。

Socket类继承 Node.js的EventEmitter的方法，Socket类重写emit方法而不修改其他任何方法。

注意：每次刷新、打开新页面生成的Socket类都是不一样的。

1. socket.emit(eventName[, args][, callback])

eventName: String  事件名

返回： Socket 类

作用：将事件发送到有eventName字符串标识的socket，连同任何参数、所有可序列化的数据结构、包括缓冲区一并发送。

callback：回调函数的参数可选，该参数用于接收 客户端的事件监听( client.socket.on() )的数据

server端：

io.on('connection', (socket) => {  socket.emit('test', 'tobi', (data) => {    console.log(data); // data will be 'emit 的回调函数的测试'  });});

client端：

socket.on('test', (name, fn) => {    fn('emit 的回调函数的测试');});

2. socket.broadcast.fn()

作用：给设置了标识符的事件方法发送数据，所以在线的都能接受数据，除了发送者自己。

Demo:

server端：

socket.on('add user', function (username) {        // 将username记录到session        socket.username = username;        // 统计在线的人数        ++numUsers;        // 所有在线的可以接收该事件，除了该发送者        socket.broadcast.emit('user joined', {            username: socket.username,            numUsers: numUsers        });    });

client端：

$('#loginBtn').on('click', function(){    //给服务端发送登录的信息    var username = $('.inputName').val();        socket.emit('add user', username);});   //接收服务端发送的event和数据    //客户端监听的eventName要与服务端 emit的eventName对应   //才可接收成功socket.on('user joined', function (data) {        var $el = $('<div>').text(data.username + ' joined');        //创建节点显示数据，告诉在线的所有伙伴 -- 有新成员加入       //新成员接收不到该message        $('.log').append($el);});

3.socket.on(eventName , callback)

eventName：String  接收客户端发送的event标识符

callback：回调函数，接收一个参数，用于接收来自客户端的数据

作用：用于接收Client端的event以及数据，并监听该事件

客户端

客户端需要安装 socket.io-client

客户端需要安装的socket.io库 ： https://github.com/socketio/socket.io-client

socket.io-client的核心目录：https://github.com/socketio/socket.io-client/tree/master/dist

IO类

1. 引入io的类

1). 普通的javascript

<script src="/socket.io/socket.io.js"></script><script>  const socket = io('http://localhost');</script>

2). 模块化引入

const io = require('socket.io-client');// or with import syntaximport io from 'socket.io-client';

Socket类

1. socket.on(eventName, callback);

作用：给客户端注册一个事件处理，接收服务端对应 eventName的event以及数据

参数：

eventName：String 与服务端对应的event 标识符

callback：回调函数

返回值： Socket类

Demo:

socket.on('news', (data) => {  //data是服务端发送的data  console.log(data);});

2. socket.emit(eventName [, args] [, callback])

作用：给服务端对应的event标识符发送event和数据，告诉服务端进行监听事件

参数：

eventName: String event标识符

args：多个参数

callback：回调函数

返回值：Socket类

Demo：

Client(客户端)

var username = 'Lucy';socket.emit('login', username, (data) => {   console.log(data); // data = I'm a happy Boy！And my name is Lucy});

Server(服务端)

io.on('connection', (socket) => {   socket.on('login', (name, fn) => {      var mgs = "I'm a happy Boy！And my name is "+name;      fn(msg);   })  })

总结：

1. 无论是客户端还是服务端，主要的通信是依赖 socket.emit和socket.on这两个方法展开。

2. socket.emit是发送event和数据，socket.on是监听event并接收数据。

3. socket.emit和socket.on之间的通信是通过eventName的event标识符进行识别对应。

4. 服务端与客户端使用的socket.io不是同一套，服务端使用socket.io,客户端使用socket.io-client

5. 连接socket：(1) 服务端： var io = require('socket.io')(HttpServer) (2) 客户端：var socket = io();