WebSocket初探

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

内容简介：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端配置就完成了。

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

查看所有标签

猜你喜欢:

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

码农书籍

Introduction to Computer Science Using Python

Dierbach, Charles / 2012-12 / $ 133.62

Introduction to Computer Science Using Python: A Computational Problem-Solving Focus introduces students to programming and computational problem-solving via a back-to-basics, step-by-step, objects-la......一起来看看《Introduction to Computer Science Using Python》这本书的介绍吧!

码农工具