? 寫作原因：公司這個月的項目計劃是優(yōu)化推送；目前我們推送用的個推（不是不好，項目限制），然后服務(wù)器那邊人員忙（本人菜雞iOS程序員），所以我就自己來做咯，如果有錯誤的地方下面留言我們一起交流哈，要源碼的記得回復(fù)留下地址哦

? 大家都知道用APNS（個推那些都是基于這個的）只能推送一些不重要的消息（比如公告，推薦你買啥啥啥），但是我們項目有加圈子/發(fā)任務(wù)/會議等等非常重要的操作，這種是不能用APNS來做的，那么我們應(yīng)該用什么呢？我們應(yīng)該用聊天那種來推送；當(dāng)然說起聊天我們技術(shù)就多了，你可以使用最裸奔的socket(https://github.com/robbiehanson/CocoaAsyncSocket)自己做協(xié)議，也可以使用封裝了一下的websocket(https://github.com/facebook/SocketRocket)等等，甚至封裝更深的socket.io(https://github.com/pkyeck/socket.IO-objc)等等；當(dāng)然你也知道答案了，websocket最適合來做推送。我們先來看看最終效果吧，如果你覺得感興趣，可以繼續(xù)往下看：

我們在我們的服務(wù)器上輸入一個內(nèi)容，點擊按鈕

模擬器上就會收到消息

? 那么現(xiàn)在開始說下準(zhǔn)備工作，1：你要會點H5，2：你要知道websocket是啥東西，3：你要有一個heroku賬號（有免費(fèi)的nodejs環(huán)境服務(wù)器），4：你要會點終端（包括解決神秘代碼和常用命令）；好的現(xiàn)在解釋下為什么要用nodejs來做服務(wù)器，因為他天生就適合websocket；那么為什么要用heroku呢，因為我之前用新浪云，新浪云也有nodejs環(huán)境，但是要收費(fèi)（土豪忽略），于是找了一個大家都拍手稱快的heroku；那么我們開始做咯。

第一步：本地先弄個簡單的websocket服務(wù)器

我們使用npm管理器來創(chuàng)建，首先自己在盡量沒有中文路徑的地方創(chuàng)建一個文件夾（名字就叫做hellowebsocket），然后我們用終端進(jìn)入文件夾：

進(jìn)入文件夾

創(chuàng)建一個基礎(chǔ)項目：

創(chuàng)建基礎(chǔ)項目

創(chuàng)建一個server.js（websocket服務(wù)器文件）:

創(chuàng)建服務(wù)器文件

配置package.json文件，覆蓋或者修改成這樣：

修改配置文件

其中的scripts我們定義一個start為node server.js操作，也就是說你輸入npm start相當(dāng)于是執(zhí)行node server.js，

我們來安裝一些工具，express（用來搭建http協(xié)議的網(wǎng)頁，我們不是要做一個網(wǎng)頁嗎？這個網(wǎng)頁是http協(xié)議的，我們肯定要搭建咯），ws（websocket的node封裝），在命令行依次輸入以下命令：1：npm install --save --save-exact express，2：npm install --save --save-exact ws bufferutil utf-8-validate，

我們來創(chuàng)建一個網(wǎng)頁，取名index.html，內(nèi)容先簡單點，點擊按鈕顯示輸入框的內(nèi)容，還沒有連接websocket服務(wù)器（server.js，以后不再注釋）：

彈出文本框內(nèi)容

現(xiàn)在我們來編輯weboscket服務(wù)器咯，先簡單點，搭建一個http協(xié)議讓index.html可以本地瀏覽器輸入localhost:3000/index.html訪問，還沒有創(chuàng)建websocket監(jiān)聽，等一下來：

搭建http環(huán)境

然后在終端中輸入npm start，這時候你在瀏覽器中輸入localhost:3000/index.html，就可以看到下面的效果了：

HTTP搭建好了

接下面我們修改一下index.html和server.js，讓index.html連接websocket服務(wù)器，weboscket服務(wù)器收到連接后發(fā)送回調(diào)消息"device your connect!"，然后index.html收到回調(diào)消息后彈窗，內(nèi)容如下：

server.js內(nèi)容

index.html內(nèi)容

這時候我們終端輸入npm start,瀏覽器中輸入localhost:3000/index.html就會彈出來回調(diào)消息了：

頁面彈出連接成功的回調(diào)消息

通過以上的幾步，大家應(yīng)該大致知道推送原理了把，就是通過websocket連接得到的標(biāo)示符進(jìn)行發(fā)送消息和接收消息

第二步：網(wǎng)頁輸入內(nèi)容點擊按鈕，websocket服務(wù)器響應(yīng)并回調(diào)相同的內(nèi)容，網(wǎng)頁收到后彈窗

?通過第一步，大家可以暫定自己想一下這個怎么做，是這樣的：我們index.html連接成功后我們通過標(biāo)識符發(fā)送消息到websocket服務(wù)器，websocket服務(wù)器收到后得到內(nèi)容并發(fā)送到index.html就可以了；那么同樣的，我們修改一下內(nèi)容：

server.js內(nèi)容

index.html內(nèi)容

同樣的，執(zhí)行npm start,瀏覽器中輸入localhost:3000/index.html，然后輸入框輸入內(nèi)容點擊按鈕就可以看到效果了：

效果圖

現(xiàn)在我們越來越得心應(yīng)手了，發(fā)現(xiàn)這么簡單?。ê冒?，下一篇我們才要開始做我們真正的目的呢，高興啥）

第三步：我們用iOS連接websocket服務(wù)器把發(fā)送的和收到的消息展示到表格視圖

經(jīng)過以上的兩步，我們終于揭開了神秘的websocket服務(wù)器面紗，我們決定要是一步一步實現(xiàn)iOS應(yīng)用的推送，廢話不對說，我們新建一個iOS工程并導(dǎo)入SRWebSocket庫（這里沒有教程，自己弄），然后寫一個表格視圖和數(shù)組，我們把發(fā)送消息和接收消息存到數(shù)組中用表格視圖展示出來，重點代碼如下：

連接websocket服務(wù)器

發(fā)送消息

接收消息

發(fā)送心跳，頻率可設(shè)

還是不要忘記了，我們執(zhí)行npm start，然后我們用模擬器打開點擊右上角的“+”號發(fā)送消息就能看到以下的效果了：

效果圖

好的，離目標(biāo)又近了，現(xiàn)在我們來點有意思的

第四步：iOS端和index.html都連接到websocket服務(wù)器，index.html點擊按鈕發(fā)送輸入內(nèi)容到websocket服務(wù)器，web socket服務(wù)器發(fā)送消息到iOS端，iOS端收到消息并顯示到表格視圖

大家應(yīng)該猜到怎么做了，主要難點是遍歷所有的websocket連接，依次發(fā)送消息，我們暫時去掉index.html收到消息彈窗的代碼，iOS端代碼不用修改，主要內(nèi)容如下：

index.html

server.js

然后依然，執(zhí)行nam start，iOS啟動模擬器，然后瀏覽器中輸入localhost:3000/index.html，輸入內(nèi)容點擊按鈕，我們就可以看到下面的效果：

發(fā)送消息

模擬器收到消息

大家發(fā)現(xiàn)是不是和我們的最終效果有點像呢？其實還差得遠(yuǎn)呢，我們下一篇開始好好寫一下細(xì)節(jié)部分

第五步：我們讓每個連接的websocket有一個對應(yīng)的標(biāo)識符，以便單獨的向某一個人發(fā)送消息

細(xì)心的小伙伴發(fā)現(xiàn)了，我們用index.html連接websocket服務(wù)器時后面帶了一個userId參數(shù)，好吧暴露了其實我們連接的時候url后面是可以加參數(shù)的，我們暫且就先用這個來和websocket連接做一個映射吧，我們這一步不使用index.html，我們用iOS端連接并帶上參數(shù)userId，然后在終端打印出來userId參數(shù)的值；有人問了，userId我在iOS請求時加上，那么在websocket服務(wù)器那邊怎么收到呢？這個問題問的很好，我們來做一下實驗，首先我們先改造一下iOS連接的代碼，如下：

iOS連接websocket帶上參數(shù)

然后我們在websocket服務(wù)器收到連接后把socket連接打印出來，代碼如下：

websocket打印連接實例

依然，npm start，iOS端啟動，這時候終端會輸出一大片東西（這就是實例咯），然后你會在中間位置看到這樣的東西：

參數(shù)位置

沒錯，我們就是要取出來這個東西，然后和websocket綁定，我們先在weboscket服務(wù)器文件上建立一個字典，然后連接的地方取出userId然后dic[userId]=websocket就可以了，為了看到效果，我們就把userId打印到終端顯示吧，代碼如下：

server.js內(nèi)容

老話題，npm start，然后啟動iOS端，就會終端打印出來了：

效果圖

轉(zhuǎn)入正題，我們既然都知道誰的連接是哪個了，那么我們接下來要做的就是在websocket服務(wù)器中接收消息（我們用index.html發(fā)消息，充當(dāng)"業(yè)務(wù)服務(wù)器"）；然后websocket服務(wù)器判斷消息是要發(fā)給誰的，然后在字典中找到那個socket連接，調(diào)用send函數(shù)即可（當(dāng)然還有其他很多的方法，可能我這個不標(biāo)準(zhǔn)），我們修改server.js為以下代碼：

給指定的userid發(fā)消息

然后我們修改一下index.html文件，給指定的userId為10001的人發(fā)送消息,消息格式在websocket服務(wù)器中定義好了，所有我們index.html給websocet發(fā)消息時要遵從消息格式加上分隔符"^"等，代碼如下：

讓web socket服務(wù)器給userId=10001的人發(fā)消息

我們讓iOS端的userId設(shè)置成10001，然后npm start，瀏覽器中輸入localhost:3000/index.html，啟動模擬器，瀏覽器中輸入內(nèi)容點擊按鈕，這時候會看到如下效果：

發(fā)送消息

iOSuserId=10001的用戶收到消息

當(dāng)然了，你可以多建幾個工程，設(shè)置連接不同的userId，然后 index.html也可以設(shè)置不限userId和限制多個userId發(fā)消息，你可以多測試一下效果。那么接下來的系列我們將把本地服務(wù)器部署到heroku上成為全局的，然后各地的個小伙伴都可以訪問到了，你可以先自己折騰下，我先給個網(wǎng)址給你們https://devcenter.heroku.com/articles/node-websockets

第六步：把websocket服務(wù)器部署到heroku服務(wù)器變?yōu)槿衷L問

有的人有個好東西就想分（xuan）享（yao）（就是我），其實websocket服務(wù)器成為全局訪問后，你發(fā)你女朋友這個網(wǎng)址（前面的index.html文件），讓她在里面里輸東西，點一下按鈕；你就能施展"神通"知道她寫的是什么，是不是很完（zhuang）美（bi）呢？那么現(xiàn)在就開始吧。上一步我最后留了一個網(wǎng)址，里面的內(nèi)容是不是還是看不懂?。ǚ凑易铋_始沒看懂，不然不會折騰這么幾天），那么用我的方式來講講吧。

首先，你要有個heroku的賬號，然后安裝heroku-toolbelt.pkg工具（我們假設(shè)完全終端里操作，不在heroku官網(wǎng)操作），地址在這里https://devcenter.heroku.com/articles/heroku-command-line，然后安裝，然后終端進(jìn)入我們的目錄中（一直都是hellowebsocket文件夾哦），執(zhí)行heroku login（輸入密碼時是沒有回顯的），然后初始化一個git工程，執(zhí)行g(shù)it init，創(chuàng)建一個heroku項目，執(zhí)行heroku create hellowebsocket（后面的名字自己看著辦，如果有錯誤回提示你的，重新想一個就是了）然后你會看到兩個地址（前面的就是你的全局地址咯，現(xiàn)在還訪問不了，慢慢來，后面的是你的git地址），這時候我們執(zhí)行g(shù)it remote add hellowebsocket https://git.heroku.com/hellowebsocket.git（第5個參數(shù)是你的git地址，用你自己的），

其次，還有重要的東西，還記得我們之前安裝了一些工具類嗎？就是node_modules文件夾里面的東西，這些東西不用提交到git項目上去，所以我們建立一個.gitignore文件忽略掉，里面就寫上node_modules就可以了；還有，我們本地服務(wù)器可以npm start執(zhí)行nodejs環(huán)境，那heroku怎么去執(zhí)行呢？我們應(yīng)該建立一個Procfile文件，里面寫上web: node server.js，這樣目錄里面就有這些內(nèi)容了：

hellowebsocket目錄

好了，現(xiàn)在可以提交了，git add .，git commit -m 'init'，git push hellowebsocket master，然后等待部署吧，你會看到如下的信息表示成功部署：

部署成功

部署成功后heroku那邊會自動啟動nodejs環(huán)境服務(wù)器（相當(dāng)于我們本地的npm start），然后我們在瀏覽器中輸入上圖黑色箭頭的地址就會看到如下結(jié)果：

地址可全局訪問了

第七步：實現(xiàn)最終效果，目標(biāo)達(dá)成

把我們的iOS端的websocket連接地址換掉，代碼如下：

iOS連接全局 websocket服務(wù)器

然后我們啟動iOS端，瀏覽器中輸入地址hellowebsocket.herokuapp.com/index.html，文本框中輸入內(nèi)容，iOS端就會顯示了，效果如下：

輸入推送內(nèi)容

iOS收到推送消息

好了，這里面還有一個小問題留給你們，我們那個html文件沒有發(fā)送心跳哦，你們?nèi)ゼ由?，還有就是可以設(shè)置心跳的頻率，你們也可以研究研究；當(dāng)然了，推送不僅僅是這樣，我們的業(yè)務(wù)服務(wù)器（目前來說我們的index.html有點像）要考慮用戶不在線的情況要把消息存起來同時發(fā)個APNS提醒用戶，然后等用戶上線后再取出消息發(fā)送出去，這部分的話我沒有實現(xiàn)，交給你們啦；還有就是業(yè)務(wù)服務(wù)器和websocket服務(wù)器分工要明確，目前我的可能都是錯誤的（因為我的判斷邏輯在websocket服務(wù)器，websocket服務(wù)器應(yīng)該只負(fù)責(zé)發(fā)送，邏輯應(yīng)該寫在業(yè)務(wù)服務(wù)器），慢慢學(xué)習(xí)吧！