一個WebSocket實時聊天室Demo：基于node.js+socket.io [附件下載]

前言

在HTML5的WebSocket出現之前，為了實現Web端的即時通訊能力，主流的實現所用的技術基本都是輪詢(polling)。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP request，然后由服務器返回最新的數據給客戶端的瀏覽器。這種傳統的HTTP request 的模式帶來很明顯的缺點：瀏覽器需要不斷的向服務器發出請求，然而HTTP request 的header是非常長的，里面包含的有用數據可能只是一個很小的值，這樣會占用很多的帶寬。

而比較新的技術去做輪詢的效果是Comet：用了AJAX（具體請參見：《Comet技術詳解：基于HTTP長連接的Web端實時通信技術》）。但這種技術雖然可達到全雙工通信，但依然每次都需要客戶端主動發出請求。

新一代HTML5規范在傳統的web交互基礎上為我們帶來了眾多的新特性，隨著web技術被廣泛用于web APP的開發，這些新特性得以推廣和使用，而WebSocket作為一種新的web通信技術具有巨大意義。

基于WebSocket的實時通信，瀏覽器和服務器只需要做一個握手的動作，然后瀏覽器和服務器之間就形成了一條快速通道，兩者之間就直接可以數據互相傳送。

在此WebSocket 協議中，為我們實現Web端即時通信服務帶來了兩大好處：

• 極大的減小了Header的大小：互相溝通的Header是很小的-大概只有 2 Bytes
• Server Push（服務端主動推的能力）：服務器不再被動的接收到瀏覽器的request之后才返回數據，而是在有新數據時就主動推送給瀏覽器。
  

本文將基于HTML5規范中的WebSocket技術，使用Node.js和Socket.io（關于Socket.io介紹，請參見《Socket.IO介紹：支持WebSocket、用于WEB端的即時通訊的框架》）來實現一個可用于Web端的簡易實時聊天室，源碼可從文末附件中下載到。

運行效果截圖

WebSocket簡介

談到Web實時推送，就不得不說WebSocket。在WebSocket出現之前，很多網站為了實現實時推送技術，通常采用的方案是輪詢(Polling)和Comet技術，Comet又可細分為兩種實現方式，一種是長輪詢機制，一種稱為流技術，這兩種方式實際上是對輪詢技術的改進，這些方案帶來很明顯的缺點，需要由瀏覽器對服務器發出HTTP request，大量消耗服務器帶寬和資源。面對這種狀況，HTML5定義了WebSocket協議，能更好的節省服務器資源和帶寬并實現真正意義上的實時推送。

WebSocket協議本質上是一個基于TCP的協議，它由通信協議和編程API組成，WebSocket能夠在瀏覽器和服務器之間建立雙向連接，以基于事件的方式，賦予瀏覽器實時通信能力。既然是雙向通信，就意味著服務器端和客戶端可以同時發送并響應請求，而不再像HTTP的請求和響應。

為了建立一個WebSocket連接，客戶端瀏覽器首先要向服務器發起一個HTTP請求，這個請求和通常的HTTP請求不同，包含了一些附加頭信息，其中附加頭信息”Upgrade: WebSocket”表明這是一個申請協議升級的HTTP請求，服務器端解析這些附加的頭信息然后產生應答信息返回給客戶端，客戶端和服務器端的WebSocket連接就建立起來了，雙方就可以通過這個連接通道自由的傳遞信息，并且這個連接會持續存在直到客戶端或者服務器端的某一方主動的關閉連接。

一個典型WebSocket客戶端請求頭：



前面講到WebSocket是HTML5中新增的一種通信協議，這意味著一部分老版本瀏覽器（主要是IE10以下版本）并不具備這個功能， 通過百度統計的公開數據顯示，IE8目前仍以33%的市場份額占據榜首，好在chrome瀏覽器市場份額逐年上升，現在以超過26%的市場份額位居第二，同時微軟前不久宣布停止對IE6的技術支持并提示用戶更新到新版本瀏覽器，這個曾經讓無數前端工程師為之頭疼的瀏覽器有望退出歷史舞臺，再加上幾乎所有的智能手機瀏覽器都支持HTML5，所以使得WebSocket的實戰意義大增，但是無論如何，我們實際的項目中，仍然要考慮低版本瀏覽器的兼容方案：在支持WebSocket的瀏覽器中采用新技術，而在不支持WebSocket的瀏覽器里啟用Comet來接收發送消息。

WebSocket實戰

本文將以多人在線聊天應用作為實例場景，我們先來確定這個聊天應用的基本需求。

1需求分析

1、兼容不支持WebSocket的低版本瀏覽器。
2、允許客戶端有相同的用戶名。
3、進入聊天室后可以看到當前在線的用戶和在線人數。
4、用戶上線或退出，所有在線的客戶端應該實時更新。
5、用戶發送消息，所有客戶端實時收取。

在實際的開發過程中，為了使用WebSocket接口構建Web應用，我們首先需要構建一個實現了 WebSocket規范的服務端，服務端的實現不受平臺和開發語言的限制，只需要遵從WebSocket規范即可，目前已經出現了一些比較成熟的WebSocket服務端實現，比如本文使用的Node.js+Socket.IO。為什么選用這個方案呢？先來簡單介紹下他們兩。

2Node.js

Node.js采用C++語言編寫而成，它不是Javascript應用，而是一個Javascript的運行環境，據Node.js創始人Ryan Dahl回憶，他最初希望采用Ruby來寫Node.js，但是后來發現Ruby虛擬機的性能不能滿足他的要求，后來他嘗試采用V8引擎，所以選擇了C++語言。

Node.js支持的系統包括*nux、Windows，這意味著程序員可以編寫系統級或者服務器端的Javascript代碼，交給Node.js來解釋執行。Node.js的Web開發框架Express，可以幫助程序員快速建立web站點，從2009年誕生至今，Node.js的成長的速度有目共睹，其發展前景獲得了技術社區的充分肯定。

3Socket.IO

Socket.IO是一個開源的WebSocket庫，它通過Node.js實現WebSocket服務端，同時也提供客戶端JS庫。Socket.IO支持以事件為基礎的實時雙向通訊，它可以工作在任何平臺、瀏覽器或移動設備。

Socket.IO支持4種協議：WebSocket、htmlfile、xhr-polling、jsonp-polling，它會自動根據瀏覽器選擇適合的通訊方式，從而讓開發者可以聚焦到功能的實現而不是平臺的兼容性，同時Socket.IO具有不錯的穩定性和性能。（更多Socket.io的文章，請參見：http://www.uktmgv.tw/forum.php?mod=collection&action=view&ctid=15）

編碼實現

本文一開始的的插圖就是效果演示圖：可以這里查看在線演示，整個開發過程非常簡單，下面簡單記錄了開發步驟。

1安裝Node.js

根據自己的操作系統，去Node.js官網下載安裝即可。如果成功安裝，在命令行輸入node -v和npm -v應該能看到相應的版本號。

node -v  
v0.10.26  
npm -v  
1.4.6

2搭建WebSocket服務端

這個環節我們盡可能的考慮真實生產環境，把WebSocket后端服務搭建成一個線上可以用域名訪問的服務，如果你是在本地開發環境，可以換成本地ip地址，或者使用一個虛擬域名指向本地ip。

進入到你的工作目錄，如/workspace/wwwroot/plhwin/realtime.plhwin.com，新建一個名為 package.json的文件，內容如下：

{
  "name": "realtime-server",
  "version": "0.0.1",
  "description": "my first realtime server",
  "dependencies": {}
}

接下來使用npm命令安裝express和socket.io：

npm install --save express
npm install --save socket.io

安裝成功后，應該可以看到工作目錄下生成了一個名為node_modules的文件夾，里面分別是express和socket.io，接下來可以開始編寫服務端的代碼了，新建一個文件：index.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
        res.send('<h1>Welcome Realtime Server</h1>');
});

http.listen(3000, function(){
        console.log('listening on *:3000');
});

命令行運行node index.js，如果一切順利，你應該會看到返回的listening on *:3000字樣，這說明服務已經成功搭建了。此時瀏覽器中打開http://localhost:3000應該可以看到正常的歡迎頁面。

如果你想要讓服務運行在線上服務器，并且可以通過域名訪問的話，可以使用Nginx做代理，在nginx.conf中添加如下配置，然后將域名（比如：realtime.domain.com）解析到服務器IP即可。

server
{
  listen       80;
  server_name  realtime.plhwin.com;
  location / {
    proxy_pass [url=http://127.0.0.1:3000;]http://127.0.0.1:3000;[/url]
  }
}

完成以上步驟，后端服務就正常搭建完成了。

服務端代碼實現

前面講到的index.js運行在服務端，之前的代碼只是一個簡單的WebServer歡迎內容，讓我們把WebSocket服務端完整的實現代碼加入進去，整個服務端就可以處理客戶端的請求了。

完整的index.js代碼如下：

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
        res.send('<h1>Welcome Realtime Server</h1>');
});

//在線用戶
var onlineUsers = {};
//當前在線人數
var onlineCount = 0;

io.on('connection', function(socket){
        console.log('a user connected');
        
        //監聽新用戶加入
        socket.on('login', function(obj){
                //將新加入用戶的唯一標識當作socket的名稱，后面退出的時候會用到
                socket.name = obj.userid;
                
                //檢查在線列表，如果不在里面就加入
                if(!onlineUsers.hasOwnProperty(obj.userid)) {
                        onlineUsers[obj.userid] = obj.username;
                        //在線人數+1
                        onlineCount++;
                }
                
                //向所有客戶端廣播用戶加入
                io.emit('login', {onlineUsers:onlineUsers, onlineCount:onlineCount, user:obj});
                console.log(obj.username+'加入了聊天室');
        });
        
        //監聽用戶退出
        socket.on('disconnect', function(){
                //將退出的用戶從在線列表中刪除
                if(onlineUsers.hasOwnProperty(socket.name)) {
                        //退出用戶的信息
                        var obj = {userid:socket.name, username:onlineUsers[socket.name]};
                        
                        //刪除
                        delete onlineUsers[socket.name];
                        //在線人數-1
                        onlineCount--;
                        
                        //向所有客戶端廣播用戶退出
                        io.emit('logout', {onlineUsers:onlineUsers, onlineCount:onlineCount, user:obj});
                        console.log(obj.username+'退出了聊天室');
                }
        });
        
        //監聽用戶發布聊天內容
        socket.on('message', function(obj){
                //向所有客戶端廣播發布的消息
                io.emit('message', obj);
                console.log(obj.username+'說：'+obj.content);
        });
  
});

http.listen(3000, function(){
        console.log('listening on *:3000');
});

客戶端代碼實現

進入客戶端工作目錄/workspace/wwwroot/plhwin/demo.plhwin.com/chat，新建一個index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="format-detection" content="telephone=no"/>
        <meta name="format-detection" content="email=no"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" name="viewport">
        <title>多人聊天室</title>
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <!--[if lt IE 8]><script src="./json3.min.js"></script><![endif]-->
        <script src="http://realtime.plhwin.com:3000/socket.io/socket.io.js"></script>
    </head>
    <body>
        <div id="loginbox">
            <div style="width:260px;margin:200px auto;">
                請先輸入你在聊天室的昵稱
                <br/>
                <br/>
                <input type="text" style="width:180px;" placeholder="請輸入用戶名" id="username" name="username" />
                                <input type="button" style="width:50px;" value="提交"/>
            </div>
        </div>
        <div id="chatbox" style="display:none;">
            <div style="background:#3d3d3d;height: 28px; width: 100%;font-size:12px;">
                <div style="line-height: 28px;color:#fff;">
                    <span style="text-align:left;margin-left:10px;">Websocket多人聊天室</span>
                    <span style="float:right; margin-right:10px;"><span id="showusername"></span> | 
                                        <a href="javascript:;" style="color:#fff;">退出</a></span>
                </div>
            </div>
            <div id="doc">
                <div id="chat">
                    <div id="message" class="message">
<div id="onlinecount" style="background:#EFEFF4; font-size:12px; margin-top:10px; margin-left:10px; color:#666;">
</div>
                    </div>
                    <div class="input-box">
                        <div class="input">
<input type="text" maxlength="140" placeholder="請輸入聊天內容，按Ctrl提交" id="content" name="content">
                        </div>
                        <div class="action">
                            <button type="button" id="mjr_send">提交</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript" src="./client.js"></script>
    </body>
</html>

上面的html內容本身沒有什么好說的，我們主要看看里面的4個文件請求：

• /socket.io/socket.io.js
• style.css
• json3.min.js
• client.js
  

第1個JS是Socket.IO提供的客戶端JS文件，在前面安裝服務端的步驟中，當npm安裝完socket.io并搭建起WebServer后，這個JS文件就可以正常訪問了。

第2個style.css文件沒什么好說的，就是樣式文件而已。

第3個JS只在IE8以下版本的IE瀏覽器中加載，目的是讓這些低版本的IE瀏覽器也能處理json，這是一個開源的JS，詳見：http://bestiejs.github.io/json3/

第4個client.js是完整的客戶端的業務邏輯實現代碼，它的內容如下：

(function () {
        var d = document,
        w = window,
        p = parseInt,
        dd = d.documentElement,
        db = d.body,
        dc = d.compatMode == 'CSS1Compat',
        dx = dc ? dd: db,
        ec = encodeURIComponent;
        
        
        w.CHAT = {
                msgObj:d.getElementById("message"),
                screenheight:w.innerHeight ? w.innerHeight : dx.clientHeight,
                username:null,
                userid:null,
                socket:null,
                //讓瀏覽器滾動條保持在最低部
                scrollToBottom:function(){
                        w.scrollTo(0, this.msgObj.clientHeight);
                },
                //退出，本例只是一個簡單的刷新
                logout:function(){
                        //this.socket.disconnect();
                        location.reload();
                },
                //提交聊天消息內容
                submit:function(){
                        var content = d.getElementById("content").value;
                        if(content != ''){
                                var obj = {
                                        userid: this.userid,
                                        username: this.username,
                                        content: content
                                };
                                this.socket.emit('message', obj);
                                d.getElementById("content").value = '';
                        }
                        return false;
                },
                genUid:function(){
                        return new Date().getTime()+""+Math.floor(Math.random()*899+100);
                },
                //更新系統消息，本例中在用戶加入、退出的時候調用
                updateSysMsg:function(o, action){
                        //當前在線用戶列表
                        var onlineUsers = o.onlineUsers;
                        //當前在線人數
                        var onlineCount = o.onlineCount;
                        //新加入用戶的信息
                        var user = o.user;
                                
                        //更新在線人數
                        var userhtml = '';
                        var separator = '';
                        for(key in onlineUsers) {
                        if(onlineUsers.hasOwnProperty(key)){
                                        userhtml += separator+onlineUsers[key];
                                        separator = '、';
                                }
                    }
                        d.getElementById("onlinecount").innerHTML = '當前共有 '+onlineCount+' 人在線，在線列表：'+userhtml;
                        
                        //添加系統消息
                        var html = '';
                        html += '<div class="msg-system">';
                        html += user.username;
                        html += (action == 'login') ? ' 加入了聊天室' : ' 退出了聊天室';
                        html += '</div>';
                        var section = d.createElement('section');
                        section.className = 'system J-mjrlinkWrap J-cutMsg';
                        section.innerHTML = html;
                        this.msgObj.appendChild(section);        
                        this.scrollToBottom();
                },
                //第一個界面用戶提交用戶名
                usernameSubmit:function(){
                        var username = d.getElementById("username").value;
                        if(username != ""){
                                d.getElementById("username").value = '';
                                d.getElementById("loginbox").style.display = 'none';
                                d.getElementById("chatbox").style.display = 'block';
                                this.init(username);
                        }
                        return false;
                },
                init:function(username){
                        /*
                        客戶端根據時間和隨機數生成uid,這樣使得聊天室用戶名稱可以重復。
                        實際項目中，如果是需要用戶登錄，那么直接采用用戶的uid來做標識就可以
                        */
                        this.userid = this.genUid();
                        this.username = username;
                        
                        d.getElementById("showusername").innerHTML = this.username;
                        this.msgObj.style.minHeight = (this.screenheight - db.clientHeight + this.msgObj.clientHeight) + "px";
                        this.scrollToBottom();
                        
                        //連接websocket后端服務器
                        this.socket = io.connect('ws://realtime.plhwin.com:3000');
                        
                        //告訴服務器端有用戶登錄
                        this.socket.emit('login', {userid:this.userid, username:this.username});
                        
                        //監聽新用戶登錄
                        this.socket.on('login', function(o){
                                CHAT.updateSysMsg(o, 'login');        
                        });
                        
                        //監聽用戶退出
                        this.socket.on('logout', function(o){
                                CHAT.updateSysMsg(o, 'logout');
                        });
                        
                        //監聽消息發送
                        this.socket.on('message', function(obj){
                                var isme = (obj.userid == CHAT.userid) ? true : false;
                                var contentDiv = '<div>'+obj.content+'</div>';
                                var usernameDiv = '<span>'+obj.username+'</span>';
                                
                                var section = d.createElement('section');
                                if(isme){
                                        section.className = 'user';
                                        section.innerHTML = contentDiv + usernameDiv;
                                } else {
                                        section.className = 'service';
                                        section.innerHTML = usernameDiv + contentDiv;
                                }
                                CHAT.msgObj.appendChild(section);
                                CHAT.scrollToBottom();        
                        });

                }
        };
        //通過“回車”提交用戶名
        d.getElementById("username").onkeydown = function(e) {
                e = e || event;
                if (e.keyCode === 13) {
                        CHAT.usernameSubmit();
                }
        };
        //通過“回車”提交信息
        d.getElementById("content").onkeydown = function(e) {
                e = e || event;
                if (e.keyCode === 13) {
                        CHAT.submit();
                }
        };
})();

在線演示

點擊以下地址進入即可體驗：http://demo.plhwin.com/chat/

源碼下載

源碼說明：
源碼中兩個文件夾 client 和 server，client文件夾是客戶端源碼，可以放在Nginx/Apache的WebServer中，也可以放在Node.js的WebServer中。后面的server文件夾里的代碼是websocket服務端代碼，放在Node.js環境中，使用npm安裝完 express 和 socket.io 后，node index.js 啟動后端服務就可以了。

附件下載：
nodejs socketio聊天室Demo源碼(52im.net).zip (13.44 KB , 下載次數: 246 , 售價: 2 金幣)

3 年前 上傳

請點擊文件名下載附件！
售價: 2 金幣  [記錄]  [如何獲取金錢？]

更多Web端即時通訊文章

《新手入門貼：史上最全Web端即時通訊技術原理詳解》
《Web端即時通訊技術盤點：短輪詢、Comet、Websocket、SSE》
《SSE技術詳解：一種全新的HTML5服務器推送事件技術》
《Comet技術詳解：基于HTTP長連接的Web端實時通信技術》
《WebSocket詳解（一）：初步認識WebSocket技術》
《socket.io實現消息推送的一點實踐及思路》
>> 更多同類文章 ……

（原文鏈接：http://www.plhwin.com/2014/05/28/nodejs-socketio/，感謝原作者潘良虎的分享）

附錄：全站精品資源下載

[1] 精品源碼下載：
《輕量級即時通訊框架MobileIMSDK的iOS源碼（開源版）[附件下載]》
《開源IM工程“蘑菇街TeamTalk”2015年5月前未刪減版完整代碼 [附件下載]》
《微信本地數據庫破解版(含iOS、Android)，僅供學習研究 [附件下載]》
《NIO框架入門(四)：Android與MINA2、Netty4的跨平臺UDP雙向通信實戰 [附件下載]》
《NIO框架入門(三)：iOS與MINA2、Netty4的跨平臺UDP雙向通信實戰 [附件下載]》
《NIO框架入門(二)：服務端基于MINA2的UDP雙向通信Demo演示 [附件下載]》
《NIO框架入門(一)：服務端基于Netty4的UDP雙向通信Demo演示 [附件下載]》
《用于IM中圖片壓縮的Android工具類源碼，效果可媲美微信 [附件下載]》
《高仿Android版手機QQ可拖拽未讀數小氣泡源碼 [附件下載]》
《一個WebSocket實時聊天室Demo：基于node.js+socket.io [附件下載]》
《Android聊天界面源碼：實現了聊天氣泡、表情圖標(可翻頁) [附件下載]》
《高仿Android版手機QQ首頁側滑菜單源碼 [附件下載]》
《開源libco庫：單機千萬連接、支撐微信8億用戶的后臺框架基石 [源碼下載]》
《分享java AMR音頻文件合并源碼，全網最全》
《微信團隊原創Android資源混淆工具：AndResGuard [有源碼]》
《一個基于MQTT通信協議的完整Android推送Demo [附件下載]》
《Android版高仿微信聊天界面源碼 [附件下載]》

[2] 精品文檔和工具下載：
《計算機網絡通訊協議關系圖（中文珍藏版）[附件下載]》
《史上最全即時通訊軟件簡史（精編大圖版）[附件下載]》
《基于RTMP協議的流媒體技術的原理與應用（技術論文）[附件下載]》
《獨家發布《TCP/IP詳解 卷1：協議》CHM版 [附件下載]》
《良心分享：WebRTC 零基礎開發者教程（中文）[附件下載]》
《MQTT協議手冊（中文翻譯版）[附件下載]》
《經典書籍《UNIX網絡編程》最全下載(卷1+卷2、中文版+英文版)[附件下載]》
《音視頻開發理論入門書籍之《視頻技術手冊(第5版)》[附件下載]》
《國際電聯H.264視頻編碼標準官方技術手冊（中文版）[附件下載]》
《Apache MINA2.0 開發指南（中文版）[附件下載]》
《網絡通訊數據抓包和分析工具 Wireshark 使用教程(中文) [附件下載]》
《最新收集NAT穿越(p2p打洞)免費STUN服務器列表 [附件下載]》
《高性能網絡編程經典：《The C10K problem(英文)》[附件下載]》
《即時通訊系統的原理、技術和應用（技術論文）[附件下載]》
《技術論文：微信對網絡影響的技術試驗及分析[附件下載]》
《華為內部3G網絡資料： WCDMA系統原理培訓手冊[附件下載]》
《網絡測試：Android版多路ping命令工具EnterprisePing[附件下載]》
《Android反編譯利器APKDB：沒有美工的日子里繼續堅強的擼》
《一款用于P2P開發的NAT類型檢測工具 [附件下載]》
《兩款增強型Ping工具：持續統計、圖形化展式網絡狀況 [附件下載]》

[3] 精選視頻、演講PPT下載：
《QQ空間移動端10億級視頻播放技術優化揭秘(視頻+PPT)[附件下載]》
《RTC實時互聯網2017年度大會精選演講PPT [附件下載]》
《微信分享開源IM網絡層組件庫Mars的技術實現(視頻+PPT)[附件下載]》
《微服務理念在微信海量用戶后臺架構中的實踐(視頻+PPT)[附件下載]》
《移動端IM開發和構建中的技術難點實踐分享(視頻+PPT)[附件下載]》
《網易云信的高品質即時通訊技術實踐之路(視頻+PPT)[附件下載]》
《騰訊音視頻實驗室：直面音視頻質量評估之痛(視頻+PPT)[附件下載]》
《騰訊QQ1.4億在線用戶的技術挑戰和架構演進之路PPT[附件下載]》
《微信朋友圈海量技術之道PPT[附件下載]》
《手機淘寶消息推送系統的架構與實踐(音頻+PPT)[附件下載]》
《如何進行實時音視頻的質量評估與監控(視頻+PPT)[附件下載]》
《Go語言構建高并發消息推送系統實踐PPT(來自360公司)[附件下載]》
《網易IM云千萬級并發消息處理能力的架構設計與實踐PPT [附件下載]》
《手機QQ的海量用戶移動化實踐分享(視頻+PPT)[附件下載]》
《釘釘——基于IM技術的新一代企業OA平臺的技術挑戰(視頻+PPT)[附件下載]》
《微信技術總監談架構：微信之道——大道至簡(PPT講稿)[附件下載]》
《Netty的架構剖析及應用案例介紹(視頻+PPT)[附件下載]》
《聲網架構師談實時音視頻云的實現難點(視頻采訪)》
《滴滴打車架構演變及應用實踐(PPT講稿)[附件下載]》
《微信海量用戶背后的后臺系統存儲架構(視頻+PPT)[附件下載]》
《在線音視頻直播室服務端架構最佳實踐(視頻+PPT)[附件下載]》
《從0到1：萬人在線的實時音視頻直播技術實踐分享(視頻+PPT)[附件下載]》
《微信移動端應對弱網絡情況的探索和實踐PPT[附件下載]》
《Android版微信從300KB到30MB的技術演進(PPT講稿)[附件下載]》

網上能找到的socket.io的都是群聊的例子。。。

引用：PonyZhao 發表于 2016-09-05 12:57
網上能找到的socket.io的都是群聊的例子。。。

是的，我之前研究過。socket.io對群聊封裝的很簡單，但要想真正實現生產上用的聊天：一對一單聊、登陸認證這些都得自已去處理，如果對nodejs或JavaScript不熟練的話，要掌握這些至少還得一周時間。

引用：IMDeveloper 發表于 2016-09-05 12:59
是的，我之前研究過。socket.io對群聊封裝的很簡單，但要想真正實現生產上用的聊天：一對一單聊、登陸認 ...

網上的demo多是基于socket.io v1.0以下版本，而socket.io 1.0以后要實現登陸認證跟原先v0.9版有很大區別，改天有空我來寫一個更完整的能用于生產的系列教程。

學習了

學習啦

好東西，下載學習學習

學習啦

必須用//連接websocket后端服務器this.socket = io.connect('ws://realtime.plhwin.com');這個服務器么？改成本地本機可以么？？如果改的話怎么改啊？？菜鳥求指點啊

引用：悲傷逆流成河 發表于 2016-09-22 15:26
必須用//連接websocket后端服務器this.socket = io.connect('ws://realtime.plhwin.com');這個服務器么？改 ...

本機就用 ws://127.0.0.1

Node+Express+MongoDB+Socket.io的方式做IM開發靠譜么？有沒有人試過坑？

引用：ashura 發表于 2017-05-18 10:29
Node+Express+MongoDB+Socket.io的方式做IM開發靠譜么？有沒有人試過坑？

nodejs+socket.io是WebSocket很好的實現方案，網易云信的Web版、號稱國產的Zendesk的逸創客服云都是用的這種。見下圖：

引用：JackJiang 發表于 2017-05-18 10:40
nodejs+socket.io是WebSocket很好的實現方案，網易云信的Web版、號稱國產的Zendesk的逸創客服云都是用的 ...

多謝樓主，看來有進一步深入學習的價值！

我在寫一個基于swoole的

引用：JackJiang 發表于 2016-09-05 13:04
網上的demo多是基于socket.io v1.0以下版本，而socket.io 1.0以后要實現登陸認證跟原先v0.9版有很大區別 ...

大佬，教程寫了嘛

引用：ayer 發表于 2017-11-02 12:01
大佬，教程寫了嘛

我在13樓說的就是MobileIMSDK-Web，有興趣可以看看：http://www.uktmgv.tw/thread-959-1-1.html

學習了

本地運行，怎么進入聊天室啊？