HTML5新功能websocket的学习与备忘-PHP版(一)

本文介绍了HTML5中的WebSocket技术,一种实现实时双向通信的方法。详细解释了WebSocket API的工作原理、新草案中的握手协议以及数据传输格式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

首先认识HTML5的websocket:

在HTML5规范中,我最喜欢的Web技术就是正迅速变得流行的WebSocket API。WebSocket提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术。这个新的API提供了一个方法,从客户端使用简单的语法有效地推动消息到服务器。让我们看一看HTML5的WebSocket API:它可用于客户端、服务器端。而且有一个优秀的第三方API,名为Socket.IO。
什么是WebSocket API?
WebSocket API是下一代客户端-服务器的异步通信方法。该通信取代了单个的TCP套接字,使用ws或wss协议,可用于任意的客户端和服务器程序。WebSocket目前由W3C进行标准化。WebSocket已经受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等浏览器的支持。

WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻,相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信,因为Ajax技术需要客户端发起请求,而WebSocket服务器和客户端可以彼此相互推送信息;XHR受到域的限制,而WebSocket允许跨域通信。

Ajax技术很聪明的一点是没有设计要使用的方式。WebSocket为指定目标创建,用于双向推送消息。

关于web实时通信技术的发展(poll,ajax,comet等)以及websocket的介绍具体请参见:

使用 HTML5 WebSocket 构建实时 Web 应用

链接的文章介绍了websocket的旧版协议草案,并用.net实现了该草案。

在2011年7月份,websocket发布了最新版的协议草案,草案的最新版本是草案10,草案的链接地址为:http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-10,新的草案增加了安全性和可扩展性。

新草案客户端与服务器端的握手协议:

客户端发起websocket请求

socket = new MozWebSocket("ws://localhost:12345/websocket/server.php")

这里用的是firefox浏览器,所以用MozWebSocket(),其他浏览器像chrome,需要用WebSocket()

请求头信息格式:

GET /chat HTTP/1.1
Host: localhost:12345
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: kHuChwCCkr9PZDPWo+nMXg==
Sec-WebSocket-Origin: http://localhost
Sec-WebSocket-Protocol: websocket
Sec-WebSocket-Version: 8

服务器端取得请求信息,主要是Sec-WebSocket-Key的值,取得该值之后,连接上字符串258EAFA5-E914-47DA-95CA-C5AB0DC85B11,然后计算其sha1散列值,生成一个20位的字符串,再对该字符串进行base64编码,最后得到的值,按照下列响应信息格式返回给客户端


HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: 0VXXdxNQxqV7u7vtIhrxqdYUgRA=
Sec-WebSocket-Protocol: websocket

客户端接收到服务器的响应信息,连接建立。

新草案的数据传输格式请参考下文:

以下部分转自:基于Websocket草案10协议的升级及基于Netty的握手实现

    2、数据传输的格式:

以下是一个格式标准图:


FIN:1位,用来表明这是一个消息的最后的消息片断,当然第一个消息片断也可能是最后的一个消息片断;

RSV1, RSV2, RSV3: 分别都是1位,如果双方之间没有约定自定义协议,那么这几位的值都必须为0,否则必须断掉WebSocket连接;

Opcode:4位操作码,定义有效负载数据,如果收到了一个未知的操作码,连接也必须断掉,以下是定义的操作码:
      *  %x0 表示连续消息片断
      *  %x1 表示文本消息片断
      *  %x2 表未二进制消息片断
      *  %x3-7 为将来的非控制消息片断保留的操作码
      *  %x8 表示连接关闭
      *  %x9 表示心跳检查的ping
      *  %xA 表示心跳检查的pong
      *  %xB-F 为将来的控制消息片断的保留操作码

Mask:1位,定义传输的数据是否有加掩码,如果设置为1,掩码键必须放在masking-key区域,客户端发送给服务端的所有消息,此位的值都是1;

Payload length: 传输数据的长度,以字节的形式表示:7位、7+16位、或者7+64位。如果这个值以字节表示是0-125这个范围,那这个值就表示传输数据的长度;如果这个值是126,则随后的两个字节表示的是一个16进制无符号数,用来表示传输数据的长度;如果这个值是127,则随后的是8个字节表示的一个64位无符合数,这个数用来表示传输数据的长度。多字节长度的数量是以网络字节的顺序表示。负载数据的长度为扩展数据及应用数据之和,扩展数据的长度可能为0,因而此时负载数据的长度就为应用数据的长度。

Masking-key:0或4个字节,客户端发送给服务端的数据,都是通过内嵌的一个32位值作为掩码的;掩码键只有在掩码位设置为1的时候存在。
Payload data:  (x+y)位,负载数据为扩展数据及应用数据长度之和。
Extension data:x位,如果客户端与服务端之间没有特殊约定,那么扩展数据的长度始终为0,任何的扩展都必须指定扩展数据的长度,或者长度的计算方式,以及在握手时如何确定正确的握手方式。如果存在扩展数据,则扩展数据就会包括在负载数据的长度之内。
Application data:y位,任意的应用数据,放在扩展数据之后,应用数据的长度=负载数据的长度-扩展数据的长度。

    数据帧协议是按照扩展的巴科斯范式(ANBF:Augmented Backus-Naur Form RFC5234)组成的:      

ws-frame                = frame-fin  
                          frame-rsv1  
                          frame-rsv2  
                          frame-rsv3  
                          frame-opcode  
                          frame-masked  
                          frame-payload-length  
                          [ frame-masking-key ]  
                          frame-payload-data  
  
frame-fin               = %x0 ; 表示这不是当前消息的最后一帧,后面还有消息  
                        / %x1 ; 表示这是当前消息的最后一帧  
  
frame-rsv1              = %x0  
                          ; 1 bit, 如果没有扩展约定,该值必须为0  
  
frame-rsv2              = %x0  
                          ; 1 bit, 如果没有扩展约定,该值必须为0  
  
frame-rsv3              = %x0  
                          ; 1 bit, 如果没有扩展约定,该值必须为0  
  
frame-opcode            = %x0 ; 表示这是一个连续帧消息  
                        / %x1 ; 表示文本消息  
                        / %x2 ; 表示二进制消息  
                        / %x3-7 ; 保留  
                        / %x8 ; 表示客户端发起的关闭  
                        / %x9 ; ping(用于心跳)  
                        / %xA ; pong(用于心跳)  
                        / %xB-F ; 保留  
  
frame-masked            = %x0 ; 数据帧没有加掩码,后面没有掩码key  
                        / %x1 ; 数据帧加了掩码,后面有掩码key  
  
frame-payload-length    = %x00-7D  
                        / %x7E frame-payload-length-16  
                        / %x7F frame-payload-length-63  
   ; 表示数据帧的长度  
  
frame-payload-length-16 = %x0000-FFFF  
   ; 表示数据帧的长度  
  
frame-payload-length-63 = %x0000000000000000-7FFFFFFFFFFFFFFF  
   ; 表示数据帧的长度  
  
frame-masking-key       = 4( %0x00-FF ) ; 掩码key,只有当掩码位为1时出现  
  
frame-payload-data      = (frame-masked-extension-data  
                           frame-masked-application-data)   ; 当掩码位为1时,这里的数据为带掩码的数据,扩展数据及应用数据都带掩码  
                        / (frame-unmasked-extension-data  
                           frame-unmasked-application-data) ; 当掩码位为0时,这里的数据为不带掩码的数据,扩展数据及应用数据都不带掩码  
  
frame-masked-extension-data     = *( %x00-FF ) ; 目前保留,以后定义  
  
frame-masked-application-data   = *( %x00-FF )  
  
frame-unmasked-extension-data   = *( %x00-FF ) ; 目前保留,以后定义  
  
frame-unmasked-application-data = *( %x00-FF ) 

:转载结束

上面是websocket的简单介绍,以作备忘。


参考文章:

草案10:http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-10#section-4.2

数据传输协议解析:http://blog.csdn.net/fenglibing/article/details/6852497

认识HTML5的websocket:http://www.cnblogs.com/wei2yi/archive/2011/03/23/1992830.html

<think>好的,我现在需要处理用户关于微信小程序云开发备忘录项目的请求。用户想要个完整的项目结构、代码实现、部署教程,并且包含待办清单、统计图表、时间轴和用户信息功能。首先,我需要回忆微信小程序云开发的基本结构,以及如何组织目录。 用户提到使用云开发,所以需要用到云函数、数据库和云存储。项目目录通常包括pages用于各个页面,components组件,images资源,cloud云函数,以及些配置文件如app.js、app.json等。我需要确保每个主要功能的代码示例,比如页面结构、逻辑处理、云函数调用,以及统计图表的实现。 接下来,部署教程部分需要指导用户如何导入项目、开通云开发、初始化环境,以及上传云函数。可能还需要提醒用户替换appid,并安装必要的依赖,比如v-charts用于图表展示。 同时,要考虑到用户可能遇到的常见问题,比如云函数部署失败、图表不显示、权限问题等,需要在注意事项里给出解决方案。此外,引用部分需要关联到站内的相关资料,但用户提供的引用内容似乎不相关,可能需要调整或忽略。 最后,生成相关问题时要围绕项目扩展、云开发问题、功能优化和部署问题,帮助用户进步探索。确保整个回答结构清晰,代码正确,并且符合微信小程序的最新开发规范。</think>### 微信小程序云开发备忘录项目指南 #### 、项目结构(精简) ``` miniprogram ├── app.js # 全局逻辑 ├── app.json # 全局配置 ├── app.wxss # 全局样式 ├── cloud # 云函数目录 │ └── todo │ ├── index.js │ └── package.json ├── components # 自定义组件 │ └── timeline │ ├── timeline.js │ ├── timeline.wxml │ └── timeline.wxss ├── images # 图片资源 ├── pages │ ├── index # 主页 │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── index.wxss │ ├── stats # 统计页 │ └── user # 用户页 └── project.config.json # 项目配置 ``` #### 二、核心代码实现 1. **云函数(cloud/todo/index.js)** ```javascript const cloud = require('wx-server-sdk') cloud.init() const db = cloud.database() exports.main = async (event) => { switch (event.action) { case 'add': return await db.collection('todos').add({data: event.data}) case 'get': return await db.collection('todos').where(event.query).get() case 'update': return await db.collection('todos').doc(event.id).update({data: event.data}) } } ``` 2. **主页逻辑(pages/index/index.js)** ```javascript Page({ data: { todos: [], newTodo: '' }, onLoad() { this.loadData() }, loadData() { wx.cloud.callFunction({ name: 'todo', data: { action: 'get', query: { openid: '{openid}' } } }).then(res => this.setData({ todos: res.result.data })) }, addTodo() { wx.cloud.callFunction({ name: 'todo', data: { action: 'add', data: { title: this.data.newTodo, done: false, timestamp: new Date() } } }).then(() => this.loadData()) } }) ``` 3. **时间轴组件(components/timeline/timeline.wxml)** ```html <view class="timeline"> <block wx:for="{{logs}}" wx:key="index"> <view class="line-item"> <text class="time">{{item.time}}</text> <text class="content">{{item.content}}</text> </view> </block> </view> ``` #### 三、部署教程 1. **环境准备** - 安装微信开发者工具(最新本) - 注册小程序账号并获取AppID 2. **云开发初始化** ```javascript // app.js wx.cloud.init({ env: 'your-env-id', traceUser: true }) ``` 3. **数据库配置** - 在云开发控制台创建`todos`集合 - 设置集合权限为: ```json { "read": true, "write": "auth.openid == doc._openid" } ``` 4. **云函数部署** ```bash 右键cloud/todo目录 -> 上传并部署 ``` #### 四、统计图表实现 使用v-charts组件: ```html <ve-histogram :data="chartData"></ve-histogram> ``` ```javascript // pages/stats/stats.js Page({ data: { chartData: { columns: ['日期', '完成数'], rows: [ { 日期: '周', 完成数: 10 }, { 日期: '周二', 完成数: 20 } ] } } }) ``` #### 五、注意事项 1. 云环境ID需在`app.js`中替换为实际值 2. 图表组件需要额外安装v-charts依赖 3. 时间轴数据建议使用WebSocket实现实时更新 4. 用户信息获取需配置`open-type="getUserInfo"` [^1]: 关于云开发权限配置的详细说明可参考微信官方文档
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值