web存储API总览
-
对于任何程序来说，能够实现数据存储是必备功能之一，并且在需要的时候能够提供数据。但在过去的Web客户端，没有能够支持数据存储的有效机制，cookie曾用来在客户端存储少量信息，但受其性质所限，cookie只能存储一些短的字符串
-
在HTML5中提供了Web存储API，它是在cookie之上的增强。这个API允许我们在用户的硬盘上存储数据，并在日后使用这些数据。
-
API可以分成两个部分：
1）信息必须且只在会话过程中使用—sessionStorage
当浏览器窗口关闭时，数据全部丢失2）信息必须长期保存且由用户决定时长—localStorage
关闭浏览器窗口时，数据继续使用 数据只能由用户删除
sessionStorage与localStorage详解,二者方法一样
-
sessionStorage这部分API就像是会话cookie的替代。
cookie以及sessionStorage都是在特定的时间段内保持数据可用。但cookie使用浏览器作为引用，而sessionStorage使用单个窗口作为引用，这就意味着，窗口关闭之后，sessionStorage就不能再使用。
-
方法
1）设置数据
setItem(key,value) key - 作为存储数据的唯一标识 value - 存储的数据内容(number/string)-
根据标识获取数据
var value = getItem(key);
-
删除指定标识的数据
removeItem(key);
4）将存储系统的所有数据删除
clear()5）根据索引值返回key
var key = key(index); -
-
属性
返回当前存储系统的数据个数 length
-
实际例子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" id="note" /> <br /> <button id="save">保存</button> <button id="read">读取</button> <button id="delete">删除</button> </body> <script type="text/javascript"> var input = document.getElementById("note"); var save = document.getElementById("save"); var read = document.getElementById("read"); var del = document.getElementById("delete"); save.onclick = function () { /* * 当前窗口被关闭时，保存的数据会自动删除 window.sessionStorage.setItem(key,value); 1.sessionStorage是全局变量window的一个属性 2.key一定要唯一 3.value可以是数字或字符串 */ var key = new Date().getTime(); localStorage.setItem(key,input.value); } read.onclick = function () { //获取到sessionStorage里面的数据个数 var length = localStorage.length; for (i=0;i<length;i++) { /* 因为存放时是按顺序存放的，所以下标是有规律的，此时可以根据i来获取到key */ var key = localStorage.key(i); var value = localStorage.getItem(key); console.log(value); } } del.onclick = function () { //将sessionStorage所有的数据都删除 localStorage.clear(); for (i=0;i<length;i++) { var key = localStorage.key(i); localStorage.removeItem.key(i); } } </script> </html>
Web socket
-
网络协议
客户端与服务端进行通信的协议
HTTP协议 - 目前互联网中最广泛的协议
SOCKET协议 - 应用于实时即时通信 -
HTTP协议的问题
1）无状态
本次客户端的请求,服务器端不知道客户端的上次请求
2）短连接
指通讯双方有数据交互时，就建立一个连接，数据发送完成后，则断开此连接，即每次连接只完成一项业务的发送。
如果建立的是短连接，服务器无法主动给客户端发送信息 -
web Socket
实现了用HTTP不容易实现的服务器端的数据推送等智能通讯技术
-
Web Socket的特点
1）这个连接是实时的，也是永久的
2）服务端可以主动推送消息
3）服务端不需要轮询客户端的请求
4）服务器端与客户端之间通信无需重新建立连接 -
使用WorkerMan,设置socket客户端
1）设置php环境变量
2）下载并解压workerMan
http://www.workerman.net/workerman
workerMan学习文档
http://doc3.workerman.net/getting-started/simple-example.html3）在任意位置创建http_test.php文件，并将课件中的start.text文件中内容复制到该文件中（位置任意，能引用到Workerman文件中的Autoloader.php即可
- 运行上建的文件，启动workerMan
Web socket的使用
-
调用 WebSocket 对象的构造器来建立与服务器之间的通信连接
var webSocket = new WebSocket (“ws://127.0.0.1: 8005/socket”) ;
请求地址(url)不能再是http://开头，Web Sockets的请求头(url的开头)
ws:// - Web Socket的缩写 wss:// - 表示加密协议 -
使用 WebSocket 对象的 send() 方法对服务器发送数据
webSocket.send (“data”); send() 方法只能发送文本数据。,使用JSON对象把任何JavaScript,对象转换称文本数据后进行发送。 -
通过WebSocket对象的close() 方法来关闭socket，切断通信连接：
webSocket.close( ) ;
-
Web Socket事件
1）通过获取 onmessage事件来接收服务器传来的数据：
webSocket.onmessage = function( event ){ var data = event.data ; }2）通过获取 onopen 事件来监听 socket 的打开事件：
webSocket.onopen = function( event ){ }3）通过获取onclose事件来监听socket 的关闭事件：
webSocket.onclose = function( event ){ }4）通过onerror事件，监听客户端与服务器端连接出错
webSocket.onerror = function( event ){ } -
通过读取 readyState 的属性值来获取 WebSocket 对象的状态。
CONNECTING（数字值为0），表示正在连接。
OPEN（数字值为1），表示已建立连接。
CLOSING（数字值为2），表示正在关闭连接。
CLOSED（数字值为2），表示已关闭连接。
socket通信示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">发送</button>
<button id="close">断开连接</button>
</body>
<script type="text/javascript">
//与服务端建立长连接
var webSocket= new WebSocket("ws://127.0.0.1:2346/socket");
//监听链接打开
webSocket.onopen=function () {
alert("连接成功");
document.getElementById("btn").onclick=function () {
webSocket.send("吃了么");
}
}
webSocket.onmessage=function (even) {
alert(even.data);
}
//断开链接
document.getElementById("close").onclick=function () {
webSocket.close();
}
//当socket断开连接以后执行
webSocket.onclose = function () {
alert("连接已断开");
}
//连接出错时调用
webSocket.onerror = function () {
alert("连接出错");
}
</script>
</html>
开启socket客户端
<?php
use Workerman\Worker;
require_once '/Workerman/Autoloader.php';
// 创建一个Worker监听2346端口，使用websocket协议通讯
$ws_worker = new Worker("websocket://0.0.0.0:2346");
// 启动4个进程对外提供服务
$ws_worker->count = 4;
// 当收到客户端发来的数据后返回hello $data给客户端
$ws_worker->onMessage = function($connection, $data)
{
// 向客户端发送hello $data
$connection->send('hello ' . $data);
};
// 运行worker
Worker::runAll();
?>
网友评论