软件工程课程汇报"/>
软件工程课程汇报
文章目录
- 汇报主题
- 收集目标
- 具体内容
- 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 属性
| 属性 | 描述 |
|---|---|
| Socket.readyState | 只读属性 readyState 表示连接状态，可以是以下值： 0 - 表示连接尚未建立 1 - 表示连接已建立，可以进行通信 2 - 表示连接正在进行关闭 3 - 表示连接已经关闭或者连接不能打开 |
| CONNECTING | 值为0，表示正在连接。 |
| OPEN | 值为1，表示连接成功，可以通信了 |
| CLOSING | 值为2，表示连接正在关闭 |
| CLOSED | 值为3，表示连接已经关闭，或者打开连接失败 |
| Socket.bufferedAmount | 只读属性 bufferedAmount表示已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。 |
WebSocket 事件
| 事件 | 事件处理程序 | 描述 |
|---|---|---|
| open | Socket.onopen | 连接建立时触发 |
| message | Socket.onmessage | 客户端接收服务端数据时触发 |
| error | Socket.onerror | 通信发生错误时触发 |
WebSocket 方法
| 方法 | 描述 |
|---|---|
| Socket.send() | 使用连接发送数据 |
| Socket.close() | 关闭连接 |
示例（JS）
var webSocket = new WebSocket(url);if(webSocket.readyState == webSocket.CONNECTING){console.log('连接正在打开');}//连接打开时触发webSocket.onopen = function () {webSocket.send(consumerId);//可以看到 "连接正在打开"并没有被打印，说明open对应的就是OPEN状态；if(webSocket.readyState == webSocket.CONNECTING){console.log('连接正在打开1');}if(webSocket.readyState == webSocket.OPEN){console.log('连接已打开');}sendMsg();window.weui.alert('已经建立连接');};//连接关闭时触发webSocket.onclose = function () {if(webSocket.readyState == webSocket.CLOSED){console.log('连接已关闭')}window.weui.alert('连接已断开');};//连接出错时触发webSocket.onerror = function () {window.weui.alert('连接错误，请稍后再试');};== webSocket.CLOSED){console.log('连接已关闭')}window.weui.alert('连接已断开');};//连接出错时触发webSocket.onerror = function () {window.weui.alert('连接错误，请稍后再试');};
更多推荐
软件工程课程汇报
发布评论