本文来自“糊糊糊糊糊了”的分享,原题《实时消息推送整理》,即时通讯网收录时有优化和改动。
cover-opti.png (6.14 KB, 下载次数: 1193)
下载附件 保存到相册
3 年前 上传
1-1.gif (84.01 KB, 下载次数: 1231)
1-2.png (33.94 KB, 下载次数: 1193)
var ShortPollingNotification = { datasInterval: null, subscribe: function() { this.datasInterval = setInterval(function() { Request.getDatas().then(function(res) { window.ChatroomDOM.renderData(res); }); }, TIMEOUT); return this.unsubscribe; }, unsubscribe: function() { this.datasInterval && clearInterval(this.datasInterval); } }
1-3.gif (41.67 KB, 下载次数: 1228)
1-4.gif (127.78 KB, 下载次数: 1301)
1-5.gif (25.45 KB, 下载次数: 1209)
2-1.png (26.04 KB, 下载次数: 1190)
// 客户端 var LongPollingNotification = { // .... subscribe: function() { var that = this; // 设置超时时间 Request.getV2Datas(this.getKey(),{ timeout: 10000 }).then(function(res) { var data = res.data; window.ChatroomDOM.renderData(res); // 成功获取数据后会再次发送请求 that.subscribe(); }).catch(function (error) { // timeout 之后也会再次发送请求 that.subscribe(); }); return this.unsubscribe; } // .... }
// 服务器端 router.get('/v2/datas', function(req, res) { const key = _.get(req.query, 'key', ''); let contentKey = chatRoom.getContentKey(); while (key === contentKey) { sleep.sleep(5); contentKey = chatRoom.getContentKey(); } const connectors = chatRoom.getConnectors(); const messages = chatRoom.getMessages(); res.json({ code: 200, data: { connectors: connectors, messages: messages, key: contentKey }, }); });
// mini-chatroom/public/javascripts/server/longPolling.js function pushDataToClient(key, longpoll) { var contentKey = chatRoom.getContentKey(); if (key !== contentKey) { var connectors = chatRoom.getConnectors(); var messages = chatRoom.getMessages(); longpoll.publish( '/v2/datas', { code: 200, data: {connectors: connectors, messages: messages, key: contentKey}, } ); } } longpoll.create("/v2/datas", function(req, res, next) { key = _.get(req.query, 'key', ''); pushDataToClient(key, longpoll); next(); }); intervalId = setInterval(function() { pushDataToClient(key, longpoll); }, LONG_POLLING_TIMEOUT);
2-2.gif (275.32 KB, 下载次数: 1306)
4-1.png (24.19 KB, 下载次数: 1231)
4-2.png (24.95 KB, 下载次数: 1202)
// 客户端 var SSENotification = { source: null, subscribe: function() { if ('EventSource' in window) { this.source = new EventSource('/sse'); this.source.addEventListener('message', function(res) { const d = res.data; window.ChatroomDOM.renderData(JSON.parse(d)); }); } return this.unsubscribe; }, unsubscribe: function () { this.source && this.source.close(); } } // 服务器端 router.get('/sse', function(req, res) { const connectors = chatRoom.getConnectors(); const messages = chatRoom.getMessages(); const response = { code: 200, data: { connectors: connectors, messages: messages } }; res.writeHead(200, { "Content-Type":"text/event-stream", "Cache-Control":"no-cache", "Connection":"keep-alive", "Access-Control-Allow-Origin": '*', }); res.write("retry: 10000\n"); res.write("data: " + JSON.stringify(response) + "\n\n"); var unsubscribe = Event.subscribe(function() { const connectors = chatRoom.getConnectors(); const messages = chatRoom.getMessages(); const response = { code: 200, data: { connectors: connectors, messages: messages } }; res.write("data: " + JSON.stringify(response) + "\n\n"); }); req.connection.addListener("close", function () { unsubscribe(); }, false); });
4-3.png (22.81 KB, 下载次数: 1191)
4-4.gif (114.9 KB, 下载次数: 1270)
3-1.png (27.93 KB, 下载次数: 1236)
3-2.png (27.94 KB, 下载次数: 1267)
// 客户端 var WebsocketNotification = { // ... subscribe: function(args) { var connector = args[1]; this.socket = io(); this.socket.emit('register', connector); this.socket.on('register done', function() { window.ChatroomDOM.renderAfterRegister(); }); this.socket.on('data', function(res) { window.ChatroomDOM.renderData(res); }); this.socket.on('disconnect', function() { window.ChatroomDOM.renderAfterLogout(); }); } // ... } // 服务器端 var io = socketIo(httpServer); io.on('connection', (socket) => { socket.on('register', function(connector) { chatRoom.onConnect(connector); io.emit('register done'); var data = chatRoom.getDatas(); io.emit('data', { data }); }); socket.on('chat', function(message) { chatRoom.receive(message); var data = chatRoom.getDatas(); io.emit('data', { data }); }); });
3-3.png (60.17 KB, 下载次数: 1258)
来源:即时通讯网 - 即时通讯开发者社区!
轻量级开源移动端即时通讯框架。
快速入门 / 性能 / 指南 / 提问
轻量级Web端即时通讯框架。
详细介绍 / 精编源码 / 手册教程
移动端实时音视频框架。
详细介绍 / 性能测试 / 安装体验
基于MobileIMSDK的移动IM系统。
详细介绍 / 产品截图 / 安装体验
一套产品级Web端IM系统。
详细介绍 / 产品截图 / 演示视频
引用此评论
引用:微姓团队 发表于 2021-05-27 20:00 爱了,爱了
引用:详情中注意查看请求类型,以及EventStream消息类型:
精华主题数超过100个。
连续任职达2年以上的合格正式版主
为论区做出突出贡献的开发者、版主等。
Copyright © 2014-2024 即时通讯网 - 即时通讯开发者社区 / 版本 V4.4
苏州网际时代信息科技有限公司 (苏ICP备16005070号-1)
Processed in 0.140625 second(s), 47 queries , Gzip On.