一步一步教你用WebSocket进行消息推送(iOS版本)

  写作原因:公司这个月的项目计划是优化推送;目前我们推送用的个推(不是不好,项目限制),然后服务器那边人员忙(本人菜鸡iOS程序员),所以我就自己来做咯,如果有错误的地方下面留言我们一起交流哈,要源码的记得回复留下地址哦

  大家都知道用APNS(个推那些都是基于这个的)只能推送一些不重要的消息(比如公告,推荐你买啥啥啥),但是我们项目有加圈子/发任务/会议等等非常重要的操作,这种是不能用APNS来做的,那么我们应该用什么呢?我们应该用聊天那种来推送;当然说起聊天我们技术就多了,你可以使用最裸奔的socket(https://github.com/robbiehanson/CocoaAsyncSocket)自己做协议,也可以使用封装了一下的websocket(https://github.com/facebook/SocketRocket)等等,甚至封装更深的socket.io(https://github.com/pkyeck/socket.IO-objc)等等;当然你也知道答案了,websocket最适合来做推送。我们先来看看最终效果吧,如果你觉得感兴趣,可以继续往下看:

我们在我们的服务器上输入一个内容,点击按钮
一步一步教你用WebSocket进行消息推送(iOS版本)_第1张图片
模拟器上就会收到消息

  那么现在开始说下准备工作,1:你要会点H5,2:你要知道websocket是啥东西,3:你要有一个heroku账号(有免费的nodejs环境服务器),4:你要会点终端(包括解决神秘代码和常用命令);好的现在解释下为什么要用nodejs来做服务器,因为他天生就适合websocket;那么为什么要用heroku呢,因为我之前用新浪云,新浪云也有nodejs环境,但是要收费(土豪忽略),于是找了一个大家都拍手称快的heroku;那么我们开始做咯。

第一步:本地先弄个简单的websocket服务器

我们使用npm管理器来创建,首先自己在尽量没有中文路径的地方创建一个文件夹(名字就叫做hellowebsocket),然后我们用终端进入文件夹:

一步一步教你用WebSocket进行消息推送(iOS版本)_第2张图片
进入文件夹

创建一个基础项目:

一步一步教你用WebSocket进行消息推送(iOS版本)_第3张图片
创建基础项目

创建一个server.js(websocket服务器文件):

创建服务器文件

配置package.json文件,覆盖或者修改成这样:

一步一步教你用WebSocket进行消息推送(iOS版本)_第4张图片
修改配置文件

其中的scripts我们定义一个start为node server.js操作,也就是说你输入npm start相当于是执行node server.js,

我们来安装一些工具,express(用来搭建http协议的网页,我们不是要做一个网页吗?这个网页是http协议的,我们肯定要搭建咯),ws(websocket的node封装),在命令行依次输入以下命令:1:npm install --save --save-exact express,2:npm install --save --save-exact ws bufferutil utf-8-validate,

我们来创建一个网页,取名index.html,内容先简单点,点击按钮显示输入框的内容,还没有连接websocket服务器(server.js,以后不再注释):

一步一步教你用WebSocket进行消息推送(iOS版本)_第5张图片
弹出文本框内容

现在我们来编辑weboscket服务器咯,先简单点,搭建一个http协议让index.html可以本地浏览器输入localhost:3000/index.html访问,还没有创建websocket监听,等一下来:

一步一步教你用WebSocket进行消息推送(iOS版本)_第6张图片
搭建http环境

然后在终端中输入npm start,这时候你在浏览器中输入localhost:3000/index.html,就可以看到下面的效果了:

一步一步教你用WebSocket进行消息推送(iOS版本)_第7张图片
HTTP搭建好了

接下面我们修改一下index.html和server.js,让index.html连接websocket服务器,weboscket服务器收到连接后发送回调消息"device your connect!",然后index.html收到回调消息后弹窗,内容如下:

一步一步教你用WebSocket进行消息推送(iOS版本)_第8张图片
server.js内容
一步一步教你用WebSocket进行消息推送(iOS版本)_第9张图片
index.html内容

这时候我们终端输入npm start,浏览器中输入localhost:3000/index.html就会弹出来回调消息了:

一步一步教你用WebSocket进行消息推送(iOS版本)_第10张图片
页面弹出连接成功的回调消息

通过以上的几步,大家应该大致知道推送原理了把,就是通过websocket连接得到的标示符进行发送消息和接收消息

第二步:网页输入内容点击按钮,websocket服务器响应并回调相同的内容,网页收到后弹窗

 通过第一步,大家可以暂定自己想一下这个怎么做,是这样的:我们index.html连接成功后我们通过标识符发送消息到websocket服务器,websocket服务器收到后得到内容并发送到index.html就可以了;那么同样的,我们修改一下内容:

一步一步教你用WebSocket进行消息推送(iOS版本)_第11张图片
server.js内容
一步一步教你用WebSocket进行消息推送(iOS版本)_第12张图片
index.html内容

同样的,执行npm start,浏览器中输入localhost:3000/index.html,然后输入框输入内容点击按钮就可以看到效果了:

一步一步教你用WebSocket进行消息推送(iOS版本)_第13张图片
效果图

现在我们越来越得心应手了,发现这么简单啊(好吧,下一篇我们才要开始做我们真正的目的呢,高兴啥)

第三步:我们用iOS连接websocket服务器把发送的和收到的消息展示到表格视图

经过以上的两步,我们终于揭开了神秘的websocket服务器面纱,我们决定要是一步一步实现iOS应用的推送,废话不对说,我们新建一个iOS工程并导入SRWebSocket库(这里没有教程,自己弄),然后写一个表格视图和数组,我们把发送消息和接收消息存到数组中用表格视图展示出来,重点代码如下:

连接websocket服务器

一步一步教你用WebSocket进行消息推送(iOS版本)_第14张图片

发送消息

一步一步教你用WebSocket进行消息推送(iOS版本)_第15张图片

接收消息

发送心跳,频率可设

还是不要忘记了,我们执行npm start,然后我们用模拟器打开点击右上角的“+”号发送消息就能看到以下的效果了:

一步一步教你用WebSocket进行消息推送(iOS版本)_第16张图片

效果图

好的,离目标又近了,现在我们来点有意思的

第四步:iOS端和index.html都连接到websocket服务器,index.html点击按钮发送输入内容到websocket服务器,web socket服务器发送消息到iOS端,iOS端收到消息并显示到表格视图

大家应该猜到怎么做了,主要难点是遍历所有的websocket连接,依次发送消息,我们暂时去掉index.html收到消息弹窗的代码,iOS端代码不用修改,主要内容如下:

一步一步教你用WebSocket进行消息推送(iOS版本)_第17张图片

index.html

一步一步教你用WebSocket进行消息推送(iOS版本)_第18张图片

server.js

然后依然,执行nam start,iOS启动模拟器,然后浏览器中输入localhost:3000/index.html,输入内容点击按钮,我们就可以看到下面的效果:

发送消息

一步一步教你用WebSocket进行消息推送(iOS版本)_第19张图片

模拟器收到消息

大家发现是不是和我们的最终效果有点像呢?其实还差得远呢,我们下一篇开始好好写一下细节部分

第五步:我们让每个连接的websocket有一个对应的标识符,以便单独的向某一个人发送消息

细心的小伙伴发现了,我们用index.html连接websocket服务器时后面带了一个userId参数,好吧暴露了其实我们连接的时候url后面是可以加参数的,我们暂且就先用这个来和websocket连接做一个映射吧,我们这一步不使用index.html,我们用iOS端连接并带上参数userId,然后在终端打印出来userId参数的值;有人问了,userId我在iOS请求时加上,那么在websocket服务器那边怎么收到呢?这个问题问的很好,我们来做一下实验,首先我们先改造一下iOS连接的代码,如下:

一步一步教你用WebSocket进行消息推送(iOS版本)_第20张图片

iOS连接websocket带上参数

然后我们在websocket服务器收到连接后把socket连接打印出来,代码如下:

一步一步教你用WebSocket进行消息推送(iOS版本)_第21张图片

websocket打印连接实例

依然,npm start,iOS端启动,这时候终端会输出一大片东西(这就是实例咯),然后你会在中间位置看到这样的东西:

一步一步教你用WebSocket进行消息推送(iOS版本)_第22张图片

参数位置

没错,我们就是要取出来这个东西,然后和websocket绑定,我们先在weboscket服务器文件上建立一个字典,然后连接的地方取出userId然后dic[userId]=websocket就可以了,为了看到效果,我们就把userId打印到终端显示吧,代码如下:

一步一步教你用WebSocket进行消息推送(iOS版本)_第23张图片

server.js内容

老话题,npm start,然后启动iOS端,就会终端打印出来了:

一步一步教你用WebSocket进行消息推送(iOS版本)_第24张图片

效果图

转入正题,我们既然都知道谁的连接是哪个了,那么我们接下来要做的就是在websocket服务器中接收消息(我们用index.html发消息,充当"业务服务器");然后websocket服务器判断消息是要发给谁的,然后在字典中找到那个socket连接,调用send函数即可(当然还有其他很多的方法,可能我这个不标准),我们修改server.js为以下代码:

一步一步教你用WebSocket进行消息推送(iOS版本)_第25张图片

给指定的userid发消息

然后我们修改一下index.html文件,给指定的userId为10001的人发送消息,消息格式在websocket服务器中定义好了,所有我们index.html给websocet发消息时要遵从消息格式加上分隔符"^"等,代码如下:

一步一步教你用WebSocket进行消息推送(iOS版本)_第26张图片

让web socket服务器给userId=10001的人发消息

我们让iOS端的userId设置成10001,然后npm start,浏览器中输入localhost:3000/index.html,启动模拟器,浏览器中输入内容点击按钮,这时候会看到如下效果:

发送消息

一步一步教你用WebSocket进行消息推送(iOS版本)_第27张图片

iOSuserId=10001的用户收到消息

当然了,你可以多建几个工程,设置连接不同的userId,然后 index.html也可以设置不限userId和限制多个userId发消息,你可以多测试一下效果。那么接下来的系列我们将把本地服务器部署到heroku上成为全局的,然后各地的个小伙伴都可以访问到了,你可以先自己折腾下,我先给个网址给你们https://devcenter.heroku.com/articles/node-websockets

第六步:把websocket服务器部署到heroku服务器变为全局访问

有的人有个好东西就想分(xuan)享(yao)(就是我),其实websocket服务器成为全局访问后,你发你女朋友这个网址(前面的index.html文件),让她在里面里输东西,点一下按钮;你就能施展"神通"知道她写的是什么,是不是很完(zhuang)美(bi)呢?那么现在就开始吧。上一步我最后留了一个网址,里面的内容是不是还是看不懂啊(反正我最开始没看懂,不然不会折腾这么几天),那么用我的方式来讲讲吧。

首先,你要有个heroku的账号,然后安装heroku-toolbelt.pkg工具(我们假设完全终端里操作,不在heroku官网操作),地址在这里https://devcenter.heroku.com/articles/heroku-command-line,然后安装,然后终端进入我们的目录中(一直都是hellowebsocket文件夹哦),执行heroku login(输入密码时是没有回显的),然后初始化一个git工程,执行git init,创建一个heroku项目,执行heroku create hellowebsocket(后面的名字自己看着办,如果有错误回提示你的,重新想一个就是了)然后你会看到两个地址(前面的就是你的全局地址咯,现在还访问不了,慢慢来,后面的是你的git地址),这时候我们执行git remote add hellowebsocket https://git.heroku.com/hellowebsocket.git(第5个参数是你的git地址,用你自己的),

其次,还有重要的东西,还记得我们之前安装了一些工具类吗?就是node_modules文件夹里面的东西,这些东西不用提交到git项目上去,所以我们建立一个.gitignore文件忽略掉,里面就写上node_modules就可以了;还有,我们本地服务器可以npm start执行nodejs环境,那heroku怎么去执行呢?我们应该建立一个Procfile文件,里面写上web: node server.js,这样目录里面就有这些内容了:

一步一步教你用WebSocket进行消息推送(iOS版本)_第28张图片

hellowebsocket目录

好了,现在可以提交了,git add .,git commit -m 'init',git push hellowebsocket master,然后等待部署吧,你会看到如下的信息表示成功部署:

一步一步教你用WebSocket进行消息推送(iOS版本)_第29张图片

部署成功

部署成功后heroku那边会自动启动nodejs环境服务器(相当于我们本地的npm start),然后我们在浏览器中输入上图黑色箭头的地址就会看到如下结果:

地址可全局访问了

第七步:实现最终效果,目标达成

把我们的iOS端的websocket连接地址换掉,代码如下:

一步一步教你用WebSocket进行消息推送(iOS版本)_第30张图片

iOS连接全局 websocket服务器

然后我们启动iOS端,浏览器中输入地址hellowebsocket.herokuapp.com/index.html,文本框中输入内容,iOS端就会显示了,效果如下:

输入推送内容

一步一步教你用WebSocket进行消息推送(iOS版本)_第31张图片

iOS收到推送消息

好了,这里面还有一个小问题留给你们,我们那个html文件没有发送心跳哦,你们去加上,还有就是可以设置心跳的频率,你们也可以研究研究;当然了,推送不仅仅是这样,我们的业务服务器(目前来说我们的index.html有点像)要考虑用户不在线的情况要把消息存起来同时发个APNS提醒用户,然后等用户上线后再取出消息发送出去,这部分的话我没有实现,交给你们啦;还有就是业务服务器和websocket服务器分工要明确,目前我的可能都是错误的(因为我的判断逻辑在websocket服务器,websocket服务器应该只负责发送,逻辑应该写在业务服务器),慢慢学习吧!

你可能感兴趣的:(一步一步教你用WebSocket进行消息推送(iOS版本))