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

? 大家都知道用APNS（個(gè)推那些都是基于這個(gè)的）只能推送一些不重要的消息（比如公告，推薦你買啥啥啥），但是我們項(xiàng)目有加圈子/發(fā)任務(wù)/會(huì)議等等非常重要的操作，這種是不能用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ù)往下看：

我們?cè)谖覀兊姆?wù)器上輸入一個(gè)內(nèi)容，點(diǎn)擊按鈕

模擬器上就會(huì)收到消息

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

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

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

進(jìn)入文件夾

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

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

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

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

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

修改配置文件

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

我們來安裝一些工具，express（用來搭建http協(xié)議的網(wǎng)頁，我們不是要做一個(gè)網(wǎng)頁嗎？這個(gè)網(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)建一個(gè)網(wǎng)頁，取名index.html，內(nèi)容先簡(jiǎn)單點(diǎn)，點(diǎn)擊按鈕顯示輸入框的內(nèi)容，還沒有連接websocket服務(wù)器（server.js，以后不再注釋）：

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

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

搭建http環(huán)境

然后在終端中輸入npm start，這時(shí)候你在瀏覽器中輸入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)容

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

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

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

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

?通過第一步，大家可以暫定自己想一下這個(gè)怎么做，是這樣的：我們index.html連接成功后我們通過標(biāo)識(shí)符發(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)容點(diǎn)擊按鈕就可以看到效果了：

效果圖

現(xiàn)在我們?cè)絹碓降眯膽?yīng)手了，發(fā)現(xiàn)這么簡(jiǎn)單啊（好吧，下一篇我們才要開始做我們真正的目的呢，高興啥）

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

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

連接websocket服務(wù)器

發(fā)送消息

接收消息

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

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

效果圖

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

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

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

index.html

server.js

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

發(fā)送消息

模擬器收到消息

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

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

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

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

然后我們?cè)趙ebsocket服務(wù)器收到連接后把socket連接打印出來，代碼如下：

websocket打印連接實(shí)例

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

參數(shù)位置

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

server.js內(nèi)容

老話題，npm start，然后啟動(dòng)iOS端，就會(huì)終端打印出來了：

效果圖

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

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

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

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

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

發(fā)送消息

iOSuserId=10001的用戶收到消息

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

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

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

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

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

hellowebsocket目錄

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

部署成功

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

地址可全局訪問了

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

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

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

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

輸入推送內(nèi)容

iOS收到推送消息

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