什么是WebSocket?

WebSocket是HTML5新增的协议，它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道，比如说，服务器可以在任意时刻发送消息给浏览器。

让浏览器和服务器之间可以建立无限制的全双工通信，任何一方都可以主动发消息给对方。

WebSocket和ajax的区别

1.本质不同

Ajax,即异步JavaScript和XML，是一种创建交互式网页应用的网页开发技术；

WebSocket是HTML5一种新的协议，实现了浏览器与服务器全双工通信。其本质是先通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接，服务端与客户端通过此TCP连接进行实时通信。

2.生命周期不同

websocket建立的是长连接，在一个会话中一直保持连接；而ajax是短连接，数据发送和接受完成后就会断开连接。

3.适用范围不同

websocket一般用于前后端实时数据交互，而ajax前后端非实时数据交互。

4.发起人不同

Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以相互推送信息。

egg使用egg-socket.io

1.配置egg-socket.io 

注意package.json  "egg-socket.io": "^4.1.6",

..\config\plugin.js

'use strict';

// View层展示模板

exports.nunjucks = {

  enable: true,

  package: 'egg-view-nunjucks',

};

// egg跨域配置

exports.cors = {

  enable: true,

  package: 'egg-cors',

};

// View层展示模板

exports.ejs = {

  enable: true,

  package: 'egg-view-ejs',

};

// egg Websocket配置

exports.io = {

  enable: true,

  package: 'egg-socket.io',

};

..\config\config.default.js

config.io = {

    namespace: {

      '/': {

        connectionMiddleware: [ 'connection' ], // 注意中间件名字必须对应上

        packetMiddleware: [],

      },

    },

  };

2.创建中间件

..\app\io\middleware\connection.js

'use strict';

// 处理鉴权

module.exports = () => {

  return async (ctx, next) => {

    ctx.socket.emit('res', 'auth!');

    console.log(module.exports, 'auth');

    await next();

  };

}

3.创建控制器

..\app\io\controller\nsp.js

'use strict';

const Controller = require('egg').Controller;

class NspController extends Controller {

  async index() {

    console.log('NspController');

    const { ctx } = this;

    const message = ctx.args[0] || {};

    await ctx.socket.emit(`resC', 'Hi! I\'ve got your ${message}`);

  }

}

module.exports = NspController;

4.创建路由

..\app\router.js

module.exports = app => {

  const { router, controller, io } = app;

  // socket.io ws://localhost:7001

  io.of('/').route('index', io.controller.nsp.index);

};

这样就可以使用了,但注意前端react 要是用socket.io-client,特别注意版本 "socket.io-client": "2.3.0",不然可能会链接不成功本人萌新说的可能不对不喜勿喷