内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

HTML5 API

2019-02-11 19:06 出处:清屏网 人气: 评论(0

地理位置

navicat.geolocation.getCurrentPosition();

传入回调函数

改方法会调用手机的GPS获取

历史记录

结构性复制 深浅拷贝

即History对象,当用户单击后退和前进的时候,会触发一个前进和后退的事件。

Web Worker

多线程。

创建一个Worker对象,然后把js传入即可执行。

传入的值会进行结构性复制,即深拷贝。

该作用域会运行在一个完全独立的js空间内。

共享Worker线程 为一种命名资源,与任何与之相连接的线程提供计算服务,和共享Worker之间的交互

ArrayBuffer 类型化数组

即,有符号,无符号等16位字节。。。

类型化数组允许把同样的字节看成8位,16位,32位或者64位的数据块。

字节顺序,即是从高位读取,还是从低位读取,即,大端序和小端序,字节顺序,是从高地址到低地址保存数据块,还是从高地址到低地址保存数据块。

这点引申一下下喽,地址线和数据线,cpu和寄存器和内存进行数据读取的时候,先通过地址线,获取到数据的地址,然后通过数据线进行传输,传输是按照高电平和低电平进行传输。即,1,0 代表着高低电平,即内存地址为地址线的多少,例如16跟地址线,那么对应于16位地址,8位十六进制的地址。然后当有32位的整形数据保存的时候,有两种方式保存,一种大端序,一种小端序,即,是低位优先还是高位优先保存,(这里还有一个字节对齐,即,为了CPU能更快访问,地址的首地址,应该具有一定的顺序,即,是否能被4整除。)CPU为了运行速度更快,因为低电平更加容易处理,所以,CPU架构大部分为低地址先保存,后再保存到高地址。网络协议二进制文件保存是使用高地址保存,即书写顺序。高在前,低在后,网络协议,文件保存为这种方式,

Blob

大数据块的不透明引用或者句柄

其中一个File对象就是一个Blod,

<script>
    // 输出选中的文件列表的信息
    function fileinfo(files){
        for(var i = 0; i < files.length; i++){// files 是一个类的数组的对象
            var f = files[i];
            console.log(f.name, f.size, f.type, f.uri, f.url, f.lastModified);
        }
    }
</script>
<input type="file" onchange = "fileinfo(this.files)" />

通过事件调用Blod函数,获得对文件的句柄。

还可以通过拖动实现,当拖动到浏览器,发生drop事件,事件和回调函数绑定,获得对文件的句柄。

下载Blob

通过url进行下载,以Blod的方式,获得对文件的引用。

构造Blob

可以创建一个新的Blob。

Blob URL

可以通过创建一个统一的资源定位符,获得一个指向该Blob的URL

实现一个拖动

先获取元素对象,然后设置对象的ondrop属性的回调函数,然后在获取图片对象的引用,对于图片来说可以获取BlobURL,然后获取BlobURL在追加到img标签即可显示出来。

但是获取的只是文件的引用

读取Blob

先使用FileReader构造函数创建出一个读取的实例对象即FileReader对象,然后再获取到对应的ArrayBuffer,通过ArrayBuffer进行输出。

传输的话可以直接通过ArrayBuffer进行网络传输,注意,传输的是大端序,需要进行转换才能进行处理。

文件系统API

目前没找到,暂时不知道什么情况

indexDB

web浏览器里由数据库,可以进行简单的数据库操作

不在阐述

套接字

创建一个套接字

var socket = new WebSocket("ws://localhost:3000");

需要注册一个事件程序,用于进行套接字的事件

socket.onopen = (e) => {
  // 套接字建立
};

然后使用send进行发送

socket.send(" hello world");

栗子

一个基于WebSocket的聊天客户端

// 服务器端
// 导入WebSocket模块:
const WebSocket = require('ws');

// 引用Server类:
const WebSocketServer = WebSocket.Server;

// 实例化:
const wss = new WebSocketServer({
  port: 3000
});

wss.on('connection', function (ws) {
  ws.send("hello world");
  ws.on('message', (message) => {
    console.log(message);
    setTimeout(() => {
      ws.send(message);
    },10000);
    ws.send(message);
  })
});

客户端

<!DOCTYPE html>
<html lang="zh_CN" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    window.onload = function () {
        // UI细节
        let nick = prompt("获取用户昵称");
        // input字段
        let input = document.getElementById("input");
        // 光标设置
        input.focus();

        // 打开套接字
        let socket = new WebSocket("ws://localhost:3000");
        // 从套接字中获取信息
        // 当收到一条消息的时候
        // 触发onmessage事件
        socket.onmessage = function (event) {
            // 获取消息内容
            let msg = event.data;
            // 进行添加
            let node = document.createTextNode(msg);
            let div = document.createElement("div");
            div.appendChild(node);
            document.body.insertBefore(div, input);
            // 输入框可见
            input.scrollIntoView();
        }

        // 消息发送
        input.onchange = () => {
            // 敲击回车键发送消息
            let msg = nick + ":" + input.value;
            // 套接字发送
            socket.send(msg);
            // 清空
            input.value = "";
        }
    }
</script>
<input id="input" style="width:100%">
</body>
</html>

扩展

消息推送机制

消息推送即发布订阅者设计模式,有两种实现方式,第一种,操作系统代维护一个唯一的套接字连接,该套接字连接连上一个操作系统官方的消息推送服务器,该服务器上对于每一个用于来说都有一个队列,每次应用只需要把消息推送到服务器上,在客户端连线的时候,从队列中拿出消息,通过套接字推送给客户端,若客户端不在线,则放入消息队列中。

另外一种,心跳检测,类似于轮询,当有消息发送的情况下,通过心跳返回给客户端。

此时还需要维护一个队列

群聊天方式

推送机制,简化为使用套接字推送,当由一人发送消息的时候,把消息发送给同时需要接收此消息所有的线程,(每个用户每次连接都创建一个线程,该线程需要从线程池中获取,当用户不在线时,或者用户不在线的时候,调用wait方法,线程挂起)此时,对于需要接收消息的线程唤起,消息推入消息队列中。

避免惊群,应该是向线程管理类,依次唤起

一对一聊天

带上需要退给对方ID,以及消息。然后放入主线程池中,或者直接唤醒对方的线程,消息推入队列,待对方上线取出消息。


分享给小伙伴们:
本文标签: HTML5API

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.