WebSocket初探

栏目: Html5 · 发布时间: 8年前

内容简介：WebSocket初探

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

传输层，主要解决数据如何在网络中传输：TCP协议。

网络层，主要解决数据如何在网络中传输：IP协议。

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

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

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

TCP连接的三次握手和四次分手：

来自网络的流程图：

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是很长的，里面包含的数据可能很小，占用带宽和服务器资源。

来自网络的流程图：

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

来自网络的流程图：

socket长连接。

Socket开源框架： CocoaAsyncSocket ， socketio/socket.io-client-swift

WebSocket开源框架: facebook/SocketRocket ， tidwall/SwiftWebSocket

UI方面开源框架： JSQMessagesViewController

第三方SDK集成：

前期：环信，容联云（集成了聊天、视频、语音）。
Firebase： https://firebase.google.com/（已墙。。bye。。。）
野狗： https://www.wilddog.com/（小团队，坐标望京）
微信用的WebRTC。

其他协议：

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并添加如下代码：

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端口。
浏览器访问 http://localhost:3000。
添加显示对话窗口的html页面。

<!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>
    <ulid="messages"></ul>
    <formaction="">
      <inputid="m"autocomplete="off"/><button>Send</button>
    </form>
  </body>
</html>

安装socket.io： npm install —save socket.io 。
将socket相关的逻辑已更新到sample的 index.js 和 index.html 中。
最终，两个浏览器窗口之间，可以进行实时接发消息，web端配置就完成了。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Uberland

Alex Rosenblat / University of California Press / 2018-11-19 / GBP 21.00

Silicon Valley technology is transforming the way we work, and Uber is leading the charge. An American startup that promised to deliver entrepreneurship for the masses through its technology, Uber ins......一起来看看《Uberland》这本书的介绍吧!

码农工具