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

? 大家都知道用APNS（個推那些都是基于這個的）只能推送一些不重要的消息（比如公告谷徙，推薦你買啥啥啥），但是我們項(xiàng)目有加圈子/發(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)容，點(diǎn)擊按鈕

模擬器上就會收到消息

? 那么現(xiàn)在開始說下準(zhǔn)備工作蚕冬，1：你要會點(diǎn)H5，2：你要知道websocket是啥東西是辕，3：你要有一個heroku賬號（有免費(fèi)的nodejs環(huán)境服務(wù)器）囤热，4：你要會點(diǎn)終端（包括解決神秘代碼和常用命令）；好的現(xiàn)在解釋下為什么要用nodejs來做服務(wù)器获三，因?yàn)樗焐瓦m合websocket旁蔼；那么為什么要用heroku呢，因?yàn)槲抑坝眯吕嗽聘斫蹋吕嗽埔灿衝odejs環(huán)境棺聊，但是要收費(fèi)（土豪忽略），于是找了一個大家都拍手稱快的heroku贞谓；那么我們開始做咯限佩。

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

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

進(jìn)入文件夾

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

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

創(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)容先簡單點(diǎn)，點(diǎn)擊按鈕顯示輸入框的內(nèi)容粤攒，還沒有連接websocket服務(wù)器（server.js所森，以后不再注釋）：

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

現(xiàn)在我們來編輯weboscket服務(wù)器咯囱持，先簡單點(diǎn)，搭建一個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)容點(diǎn)擊按鈕世曾，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)容點(diǎn)擊按鈕就可以看到效果了：

效果圖

現(xiàn)在我們越來越得心應(yīng)手了述寡，發(fā)現(xiàn)這么簡單啊（好吧玫恳，下一篇我們才要開始做我們真正的目的呢辨赐，高興啥）

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

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

連接websocket服務(wù)器

發(fā)送消息

接收消息

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

還是不要忘記了，我們執(zhí)行npm start钥星，然后我們用模擬器打開點(diǎn)擊右上角的“+”號發(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ā)送消息魂莫，我們暫時去掉index.html收到消息彈窗的代碼，iOS端代碼不用修改爹耗，主要內(nèi)容如下：

index.html

server.js

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

發(fā)送消息

模擬器收到消息

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

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

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

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

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

websocket打印連接實(shí)例

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

參數(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)容點(diǎn)擊按鈕读处，這時候會看到如下效果：

發(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）（就是我）包个，其實(shí)websocket服務(wù)器成為全局訪問后，你發(fā)你女朋友這個網(wǎng)址（前面的index.html文件）铭拧，讓她在里面里輸東西赃蛛，點(diǎn)一下按鈕；你就能施展"神通"知道她寫的是什么搀菩，是不是很完（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項(xiàng)目，執(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項(xiàng)目上去怎抛，所以我們建立一個.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é)果：

地址可全局訪問了

第七步：實(shí)現(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有點(diǎn)像）要考慮用戶不在線的情況要把消息存起來同時發(fā)個APNS提醒用戶，然后等用戶上線后再取出消息發(fā)送出去巍糯，這部分的話我沒有實(shí)現(xiàn)啸驯，交給你們啦；還有就是業(yè)務(wù)服務(wù)器和websocket服務(wù)器分工要明確祟峦，目前我的可能都是錯誤的（因?yàn)槲业呐袛噙壿嬙趙ebsocket服務(wù)器罚斗，websocket服務(wù)器應(yīng)該只負(fù)責(zé)發(fā)送，邏輯應(yīng)該寫在業(yè)務(wù)服務(wù)器）宅楞，慢慢學(xué)習(xí)吧针姿！