什么是WebSocket?
WebSocket是HTML5新增的協(xié)議，它的目的是在瀏覽器和服務(wù)器之間建立一個(gè)不受限的雙向通信的通道，比如說码撰，服務(wù)器可以在任意時(shí)刻發(fā)送消息給瀏覽器馁蒂。
讓瀏覽器和服務(wù)器之間可以建立無限制的全雙工通信，任何一方都可以主動發(fā)消息給對方部脚。
WebSocket和ajax的區(qū)別
1.本質(zhì)不同
Ajax,即異步JavaScript和XML，是一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)裤纹；
WebSocket是HTML5一種新的協(xié)議委刘，實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信丧没。其本質(zhì)是先通過HTTP/HTTPS協(xié)議進(jìn)行握手后創(chuàng)建一個(gè)用于交換數(shù)據(jù)的TCP連接，服務(wù)端與客戶端通過此TCP連接進(jìn)行實(shí)時(shí)通信锡移。
2.生命周期不同
websocket建立的是長連接呕童，在一個(gè)會話中一直保持連接；而ajax是短連接淆珊，數(shù)據(jù)發(fā)送和接受完成后就會斷開連接夺饲。
3.適用范圍不同
websocket一般用于前后端實(shí)時(shí)數(shù)據(jù)交互，而ajax前后端非實(shí)時(shí)數(shù)據(jù)交互施符。
4.發(fā)起人不同
Ajax技術(shù)需要客戶端發(fā)起請求往声，而WebSocket服務(wù)器和客戶端可以相互推送信息。
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' ], // 注意中間件名字必須對應(yīng)上
? ? ? ? packetMiddleware: [],
? ? ? },
? ? },
? };
2.創(chuàng)建中間件
..\app\io\middleware\connection.js
'use strict';
// 處理鑒權(quán)
module.exports = () => {
? return async (ctx, next) => {
? ? ctx.socket.emit('res', 'auth!');
? ? console.log(module.exports, 'auth');
? ? await next();
? };
}
3.創(chuàng)建控制器
..\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.創(chuàng)建路由
..\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",不然可能會鏈接不成功本人萌新說的可能不對不喜勿噴
