連夜擼了一個簡易聊天室

分不清輪詢、長輪詢？不知道什么時候該用websocket還是SSE，看這篇就夠了。

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);
??}
}

// 客戶端
var?LongPollingNotification = {
????// ....
????subscribe: function() {
??????var?that = this;

??????// 設(shè)置超時時間
??????Request.getV2Datas(this.getKey(),{ timeout: 10000?}).then(function(res) {
????????var?data = res.data;
????????window.ChatroomDOM.renderData(res);
????????// 成功獲取數(shù)據(jù)后會再次發(fā)送請求
????????that.subscribe();
??????}).catch(function?(error) {
????????// timeout 之后也會再次發(fā)送請求
????????that.subscribe();
??????});
??????return?this.unsubscribe;
????}

????// ....
}

// 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);

// 客戶端
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();
????});
??}
??// ...
}

// 服務(wù)器端
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 });
??});
});

// 客戶端
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();
??}
}

// 服務(wù)器端
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);
});

題外話: 目前小哈正在個人博客（新搭建的網(wǎng)站，域名就是犬小哈的拼音）?www.quanxiaoha.com?上更新《Go語言教程》、《Gin Web框架教程》，畢竟Go自帶天然的并發(fā)優(yōu)勢，后端的同學還是要學一下的，這個教程系列小哈會一直更新下去，歡迎小伙伴們訪問哦~
END

有熱門推薦?
1.?還敢亂寫代碼？？騰訊 Code Review 規(guī)范出爐！
2.?宕機了，Redis數(shù)據(jù)丟了怎么辦？
3.?CPU緩存L1/L2/L3工作原理
4.?2020 最爛密碼 TOP 200 大曝光！
最近面試BAT，整理一份面試資料《Java面試BATJ通關(guān)手冊》，覆蓋了Java核心技術(shù)、JVM、Java并發(fā)、SSM、微服務(wù)、數(shù)據(jù)庫、數(shù)據(jù)結(jié)構(gòu)等等。
獲取方式：點“在看”，關(guān)注公眾號并回復(fù)?Java?領(lǐng)取，更多內(nèi)容陸續(xù)奉上。
文章有幫助的話，在看，轉(zhuǎn)發(fā)吧。
謝謝支持喲 (*^__^*）