1.基础概要

应用层,主要解决如何包装数据:HTTP、FTP、Telnet等。其中,HTTP连接最显著的特点是客户端发送的每次请求都需要服务器回送响应,在请求结束后,会主动释放连接。所以是短连接。相对而言,socket连接是长连接,两端一旦建立连接将不会主动断掉。但由于各种环境因素可能会断开,所以当一个socket连接中没有数据传输时,为了维持连接需要发送心跳消息
传输层,主要解决数据如何在网络中传输:TCP协议。
网络层,主要解决数据如何在网络中传输:IP协议。

心跳消息(Heartbeat Message):是一种发送源发送到接收方的消息,这种消息可以让接收方确定发送源是否以及何时出现故障或终止。常用于高可用性或容错处理的目的。

socket是对TCP/IP协议的封装和应用,本身并不是协议而是一个调用接口(API),通过socket,我们才能使用TCP/IP协议。

“TCP/IP只是一个协议栈,就像操作系统的运行机制一样,必须要具体实现,同时还要提供对外的操作接口。就像操作系统会提供标准的编程接口,比如win32编程接口一样,TCP/IP也要提供可供程序员做网络开发所用的接口,这就是Socket编程接口。”

TCP连接的三次握手和四次分手:
来自网络的流程图:
TCP3344

TCP与UDP的区别:

  • TCP是面向连接的,保证连接的可靠性;
  • UDP在传送数据之前并不与对方建立连接,对收到的数据也不发送确认信号,是无连接的、不可靠的数据传输协议。
  • MSN采用TCP协议,QQ采用UDP,所以后者更快一些。

2.利用Socket建立网络连接的步骤

ClientSocket,ServerSocket

套接字之间的连接步骤:

  • 服务器监听:处于等待客户端连接请求的状态,实时监控网络状态。
  • 客户端请求:ClientSocket必须首先描述它要连接的ServerSocket,指出ServerSocket的地址和端口号,然后提出连接请求。
  • 连接确认:当ServerSocket接收到ClientSocket的连接请求时,就响应请求,建立一个新的线程,把ServerSocket的描述发给ClientSocket,一旦Client确认了此描述,双方就正式建立连接。而ServerSocket继续处于监听状态,继续接收其他ClientSocket的连接请求。

3.WebSocket

WebSocket是HTML5开始提供的一种浏览器和服务器间进行全双工通讯的网络技术。在WebSocket API中,浏览器和服务器只需要做一个握手的动作,就可以形成一条快速通道,二者就可以直接进行数据互传。

全双工:通讯传输的术语。指可以同时(瞬时)进行信号的双向传输。与之相对,单工就是只允许甲方向乙方传送信息,而乙方不能向甲方传送。

面对这种情况,HTML5定义了WebSocket协议,节省服务器资源和带宽,并达到实时通讯。

具体规范见官网的RFC 6455文档翻译版本

客户端的WebSocket对象共绑定了四个事件:

  • onopen:连接建立时触发;
  • onmessage:收到服务器消息时触发;
  • onerror:连接出错时触发;
  • onclose:连接关闭时触发。

socket与websocket的差别:

  • socket是更底层。
  • websocket是在普通的socket的基础上添加一些framing和一次http兼容的握手机制。这个http兼容的握手机制只是为了允许websocket在webserver运行的同一个端口上进行连接,但一旦连接建立,webserver就不再loop中了。

4.IM即时聊天的解决方案

IM的主流技术:

  • http polling:即轮询,是在特定的时间间隔(如1秒),由浏览器对服务器发出HTTP request,然后由服务器返回最新的数据给客户端的浏览器。缺点是,浏览器不断向服务器发出请求,HTTP request的header是很长的,里面包含的数据可能很小,占用带宽和服务器资源。

来自网络的流程图:
polling

  • http long-polling:即长轮询,又称comet。当server端没有数据推送到client端时,请求不会立即返回,而是被server端hold住,直到有数据发送,或者超时,才发送响应。client收到响应之后,立即重新发起http请求。

来自网络的流程图:
long polling

  • socket长连接。

Socket开源框架:CocoaAsyncSocketsocketio/socket.io-client-swift
WebSocket开源框架:facebook/SocketRockettidwall/SwiftWebSocket
UI方面开源框架:JSQMessagesViewController

第三方SDK集成:

其他协议:

  • MQTT:是一个客户端服务端架构的发布/订阅模式的消息传输协议。知名的IM移动app,应该都是用的这个。听说XMPP到一定并发量有天坑。。?
  • XMPP:是一种以XML为基础的开放式即时通信协议。

5.iOS端与web端通过socket建立通讯

web端:使用的是nodejs的socket.io。
iOS端:使用的是socket.io的Swift版本

5.1 web端配置
  • 安装node.js:https://nodejs.org/en/
  • 安装node.js的web框架express:npm install —save express@4.15.2
  • 创建index.js并添加如下代码:
1
2
3
4
5
6
7
8
9
10
var app = require('express')();
var http = require('http').Server(app);
app.get('/', function(req, res){
res.send('<h1>Hello world</h1>');
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
  • 运行 node index.js,terminal显示正在监听3000端口。
    run node

  • 浏览器访问http://localhost:3000。
    visit localhost

  • 添加显示对话窗口的html页面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</body>
</html>
  • 安装socket.io:npm install —save socket.io
  • 将socket相关的逻辑已更新到sample的index.jsindex.html中。

  • 最终,两个浏览器窗口之间,可以进行实时接发消息,web端配置就完成了。

5.2 iOS端配置
1
2
$ cd WebSocketSample/ClientWebSocket
$ open SocketChat.xcodeproj

项目完整代码见Github: https://github.com/CaliosD/WebSocketSample

6.参考文档