软件工程课程汇报

软件工程课程汇报

文章目录

• • 汇报主题
  • 收集目标
  • 具体内容
  • •   WS介绍
    •   Socket（套接字）是什么
    •   WebSocket是什么
    •   websocket 建立连接及数据传送
    • •   建立连接
      •   数据传送
    •   websocket的创建和常用的属性方法
    • • •   创建对象
        •   WebSocket 属性
        •   WebSocket 事件
        •   WebSocket 方法
        •   示例（JS）

汇报主题

服务端如何感知用户端的存在

收集目标

用 WS 协议建立服务器端与用户端的通信，心跳机制是内部实现要点

具体内容

  WS介绍

HTTP 协议有一个缺陷：通信只能由客户端发起。

WS 协议，即 WebSocket 协议， 是 H5 下一种新的协议，它诞生于 2008 年，2011 年成为国际标准，现在所有浏览器都已支持。

它实现了浏览器与服务器全双工通信（双方可同时向对方发送消息）,能更好的节省服务器资源和带宽,并达到实时通讯的目的,

最大特点是：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术。

  Socket（套接字）是什么

网络层的 “IP地址” 可以唯一标识网络中的主机，而传输层的 “协议+端口” 可以唯一标识主机中的应用程序（进程）

网络中的两个应用程序（进程）进行全双工相互通信，需要用到应用编程接口 socket ，它能够提供端对端通信。

简单来说，Socket 是应用层与 TCP/IP 协议族通信的中间软件抽象层，它是一组接口

对程序员而言，建立一个端对端的 TCP 连接（即计网中的三次握手）：

• 在客户端创建一个 socket 实例并且提供服务端的 IP 地址和端口
• 服务端创建另一个 socket 实例并绑定本地端口进行监听
• 然后客户端进行连接服务端
• 服务端接受连接

一旦建立这个连接之后，通信双方就没有客户端服务端之分了，提供的就是端对端通信

  WebSocket是什么

WebSocket 借鉴了Socket 的思想，为web应用程序客户端和服务端之间提供了一种全双工通信机制，是一种新的应用层协议

通常它表示为：

ws://echo.websocket/?encoding=text HTTP/1.1

除了前面的协议名和 http 不同之外，它的表示地址就是传统的 url 地址。

但实质上跟 HTTP 协议基本没有关系，只是为了兼容现有浏览器的握手规范而已

websocket 具有以下几个方面的优势：

• 建立在 TCP 协议之上，服务器端的实现比较容易

• 与 HTTP 协议有着良好的兼容性。默认端口也是 80 和 443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器

• 数据格式比较轻量，性能开销小，通信高效

• 可以发送文本，也可以发送二进制数据

• 没有同源限制，客户端可以与任意服务器通信

• 协议标识符是ws（如果加密，则为wss），服务器网址就是 URL
  
  
  

  websocket 建立连接及数据传送

  建立连接

（1）在客户端构建一个websocket实例，并且为它绑定一个需要连接到的服务器地址，向服务端发送一个类似下面的http报文

（2）服务器返回报文，表示接受请求，成功建立 WebSocket 连接

返回的状态码为101，表示同意客户端协议转换请求，并将它转换为websocket协议。

以上过程都是复用HTTP通道完成的，经过这握手之后，客户端和服务端就建立了 websocket 连接，以后的通信走的都是websocket协议了

一旦建立连接之后，就可以进行数据传输了，websocket提供两种数据传输：文本数据和二进制数据

  数据传送

WebSocket客户端-服务端通信的最小单位是帧（frame），由1个或多个帧组成一条完整的消息（message）。

详情如下：

• 发送端：将消息切割成多个帧，并发送给服务端；

• 接收端：接收消息帧，并将关联的帧重新组装成完整的消息。
  
  

  websocket的创建和常用的属性方法

  创建对象

​ 以下 API 用于创建 WebSocket 对象：

var Socket = new WebSocket(url, [protocol] );
# url:指定连接的 URL
# protocol:可选，指定可接受的子协议

  WebSocket 属性

属性	描述
只读属性 readyState 表示连接状态，可以是以下值： 0 - 表示连接尚未建立 1 - 表示连接已建立，可以进行通信 2 - 表示连接正在进行关闭 3 - 表示连接已经关闭或者连接不能打开
CONNECTING	值为0，表示正在连接。
OPEN	值为1，表示连接成功，可以通信了
CLOSING	值为2，表示连接正在关闭
CLOSED	值为3，表示连接已经关闭，或者打开连接失败
Socket.bufferedAmount	只读属性 bufferedAmount表示已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

  WebSocket 事件

事件	事件处理程序	描述
open	连接建立时触发
message	客户端接收服务端数据时触发
error	通信发生错误时触发

  WebSocket 方法

方法	描述
Socket.send()	使用连接发送数据
Socket.close()	关闭连接

  示例（JS）

  var webSocket = new WebSocket(url);adyState == webSocket.CONNECTING){console.log('连接正在打开');}//连接打开时触发pen = function () {webSocket.send(consumerId);//可以看到 "连接正在打开"并没有被打印，说明open对应的就是OPEN状态；adyState == webSocket.CONNECTING){console.log('连接正在打开1');}adyState == webSocket.OPEN){console.log('连接已打开');}sendMsg();window.weui.alert('已经建立连接');};//连接关闭时触发lose = function () {adyState == webSocket.CLOSED){console.log('连接已关闭')}window.weui.alert('连接已断开');};//连接出错时触发r = function () {window.weui.alert('连接错误，请稍后再试');};== webSocket.CLOSED){console.log('连接已关闭')}window.weui.alert('连接已断开');};//连接出错时触发r = function () {window.weui.alert('连接错误，请稍后再试');};