前端必学必会-多媒体-本地存储-浏览器与服务器的交互-通信功能

冷不防 2021-07-24 22:32 589阅读 0赞

# 前言 #

大家好呀~ 我是想出去玩的哪吒。

最近关于疫情的好消息越来越多，生活开始回归正轨，大家也逐步进入工作状态了。话不多说，进行学习了。

下面我们就来看一看，邀请掘友们的点赞留言。

# 多媒体 #

多媒体，你想到了什么？我想到了`video`元素和`audio`元素。

学习元素的知识点，涉及属性，方法，事件。在HTML5出现前，展示视频，音频，动画等，都是使用第三方自主开发，使用最多的工具是`flash`了。

现在通过HTML5技术提供的音频视频接口就不用安装插件了。

> 媒体是对音频和视频一类的总称。

![format_png][]

1.  `video`元素是用来播放网络上的视频的
2.  `audio`元素是用来播放网络上的音频的

使用`audio`元素：

使用`video`元素：

使用`source`元素：该元素可以为同一个媒体数据指定多个播放格式与编码方式，以确保浏览器可以从中选择一种自己支持的播放格式进行播放。

顺序从上到下判断自己对该播放格式是否支持，直到找到为止。

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>src</td> 
   <td>播放媒体的url地址</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>媒体类型</td> 
  </tr> 
 </tbody> 
</table>

## `` ##

## `audio`元素和`video`元素 ##

## 共有的属性：    ##

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>src</td> 
   <td>指定媒体数据的url地址</td> 
  </tr> 
  <tr> 
   <td>autoplay</td> 
   <td>指定媒体是否在页面加载后自动播放</td> 
  </tr> 
  <tr> 
   <td>preload</td> 
   <td>指定视频或音频数据是否预加载</td> 
  </tr> 
  <tr> 
   <td>loop</td> 
   <td>指定是否循环播放视频或者音频</td> 
  </tr> 
  <tr> 
   <td>controls</td> 
   <td>指定是否为视频或者音频添加浏览器自带的播放用的控制条</td> 
  </tr> 
 </tbody> 
</table>

`preload`的属性值，`none`表示为不进行预加载。`metadata`表示只预加载媒体的元数据。`auto`表示预加载全部视频或音频。

`poster`它是`video`元素独有属性，当视频不可用时，可以使用该元素用图片代替，避免在视频的区域出现一片空白。

`width`和`height`为视频的宽度和高度，是`video`元素独有的属性。

### error属性 ###

一般正常情况，`video`元素或者`audio`元素的`error`属性为`null`。

出现错误时，返回一个`MediaError`对象，该对象的`code`返回对于的错误状态值。

![format_png 1][]

`media_err_aborted`，媒体数据的下载过程由于用户的操作原因而被中止。

`media_err_network`，确认媒体资源可用，但是在下载时出现网络错误，媒体数据的下载过程被中止。

`media_err_decode`，确认媒体资源可用，但是解码时发生错误。

`media_err_src_not_supported`，媒体格式不被支持。

### `networkState`属性 ###

`networkState`属性用于读取当前网络的状态。

![format_png 2][]

*  `network_empty`为元素处于初始状态
 *  `network_idle`为浏览器已经处理好用什么编码格式来播放媒体，但就是未建立网络连接
 *  `network_loading`为媒体数据加载中
 *  `network_no_source`为没有支持的编码格式，不执行加载

### `` ###

### `currentSrc`属性 ###

### `currentSrc`用来读取播放中的媒体数据的`url`地址    ###

### buffered属性 ###

使用`buffered`属性，会返回一个对象，该对象实现`TimeRanges`接口，用来确认是否已缓存媒体数据。

`TimeRanges`对象表示一段时间范围，，一般情况下，大都是表示时间范围是一个单一的以0开始的范围。

> 如果浏览器发出`Range Requests`请求，那么这个`TimeRanges`对象表示的时间范围是多个时间范围。

在这个对象中，有一个`length`属性，表示有多少个时间范围。

一般情况下，存在时间范围时，该值为1；不存在时间范围时，该值为0.

![format_png 3][]

一般情况下`index`为0：

1.  `TimeRanges.start(0)`表示当前缓存区内从什么时间开始进行缓存
2.  `TimeRanges.end(0)`表示当前缓存区内从什么时间结束缓存

### `` ###

### `readyState`属性 ###

### `readyState`属性返回媒体当前播放位置的就绪状态。    ###

![format_png 4][]

1.  `have_nothing`表示没有获取到媒体的信息，当前播放位置没有可播放的数据。
2.  `have_metadata`表示已有获取到足够的媒体数据，但是当前播放位置没有有效的媒体数据。
3.  `have_current_data`表示已有播放的数据，但是没有让播放器前进的数据。就是视频有当前帧的数据，却没有下一帧的数据，或已是最后一帧。
4.  `have_future_data`表示当前有播放的数据，也有播放前进的数据的数据，当最后播放一帧时，`readyState`属性不可能为`have_future_data`。
5.  `have_enough_data`表示当前有播放的数据，也有前进的数据，保证了后续有足够的数据进行播放。

### `` ###

### `seeking`属性和`seekable`属性 ###

### `seeking`属性返回一个布尔值：    ###

1.  `true`表示浏览器正在请求数据
2.  `false`表示浏览器已经停止请求

`seekable`属性返回一个`TimeRanges`对象，该对象表示请求到的数据的时间范围。

1.  开始时间：请求到数据的第一帧的时间
2.  结束时间：请求到数据的最后一帧的时间

### `` ###

### `currentTime`属性，`startTime`属性，`duration`属性 ###

> `currentTime`属性用来修改当前播放位置，以及读取媒体的当前播放位置。

`startTime`属性来读取媒体播放的开始时间，通常为0。

`duration`属性用来读取媒体文件总的播放时间。

### `` ###

### `played`属性，`paused`属性，`ended`属性 ###

### `played`属性返回一个`TimeRanges`对象，表示读取媒体文件的已播放部分的时间段。    ###

1.  开始时间为已播放的开始时间
2.  结束时间为已播放的结束时间

`paused`属性返回一个布尔值，表示是否处于暂停播放

1.  `true`表示暂停播放
2.  `false`表示正在播放

### `` ###

### `defaultPlaybackRate`属性与`playbackRate`属性 ###

###     ###

### `defaultPlaybackRate`属性读取或修改媒体默认的播放速率    ###

`playbackRate`属性读取或修改媒体当前的播放速率。

### `volume`属性和`muted`属性 ###

`volume`属性：读取或修改媒体的播放音量，值0到1

`muted`属性读取或修改媒体的静音状态，值为布尔值

1.  `true`为静音状态
2.  `false`为非静音状态

## 方法 ##

都有的四种方法：

![format_png 5][]

### `` ###

### `canPlayType`方法 ###

### `` ###

### `canPlayType`方法用来测试浏览器是否支持指定的媒体类型    ###

var support = videoElement.canPlayType(type)

![format_png 6][]

## 事件 ##

对媒体数据进行一系列的事件。

![format_png 7][]

第一种：

videoElement.addEventListener(type,listener,useCapture)video.addEventListener("error", function()
    {
        ...
    },false);

第二种：

<video id="video1" src="" onplay=“begin();”></video>
    function begin()
    {
        ...
    }

### 事件方法 ###

<table> 
 <thead> 
  <tr> 
   <th>事件</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>loadstart</td> 
   <td>浏览器开始找媒体数据</td> 
  </tr> 
  <tr> 
   <td>progress</td> 
   <td>浏览器正在获取媒体数据</td> 
  </tr> 
  <tr> 
   <td>suspend</td> 
   <td>浏览器暂停获取媒体数据，但下载过程并没有结束</td> 
  </tr> 
  <tr> 
   <td>abort</td> 
   <td>中止获取媒体数据，并不是由错误引起的</td> 
  </tr> 
  <tr> 
   <td>error</td> 
   <td>获取媒体数据过程中出错</td> 
  </tr> 
  <tr> 
   <td>emptied</td> 
   <td>所在网络变为未初始化状态：1,载入媒体过程中出现错误;2,在浏览器选择支持的播放格式时，又调用了load方法</td> 
  </tr> 
  <tr> 
   <td>stalled</td> 
   <td>浏览器尝试获取媒体数据失败</td> 
  </tr> 
  <tr> 
   <td>play</td> 
   <td>播放</td> 
  </tr> 
  <tr> 
   <td>pause</td> 
   <td>播放暂停</td> 
  </tr> 
  <tr> 
   <td>loadedmetadata</td> 
   <td>浏览器获取完毕媒体的时间长和字节数</td> 
  </tr> 
  <tr> 
   <td>loadeddata</td> 
   <td>浏览器已加载完毕当前播放的媒体数据</td> 
  </tr> 
  <tr> 
   <td>waiting</td> 
   <td>播放过程由于获取不到下一帧就暂停播放，但是很快就恢复了，又能得到下一帧</td> 
  </tr> 
  <tr> 
   <td>playing</td> 
   <td>正在播放</td> 
  </tr> 
  <tr> 
   <td>canplay</td> 
   <td>能够播放，播放的速率不能够直接将媒体播放完毕，播放期间需要缓冲</td> 
  </tr> 
  <tr> 
   <td>canplaythrough</td> 
   <td>能够播放，播放速率也可以，所以不用进行缓冲</td> 
  </tr> 
  <tr> 
   <td>seeking</td> 
   <td>为true时，表示正在请求数据</td> 
  </tr> 
  <tr> 
   <td>seeked</td> 
   <td>为false时，表示停止请求数据</td> 
  </tr> 
  <tr> 
   <td>timeupdate</td> 
   <td>表示当前播放位置被改变</td> 
  </tr> 
  <tr> 
   <td>ended</td> 
   <td>播放结束后停止播放</td> 
  </tr> 
  <tr> 
   <td>ratechange</td> 
   <td>defaultplaybackRate属性或playbackRate属性被改变</td> 
  </tr> 
  <tr> 
   <td>durationchange</td> 
   <td>播放时长被改变</td> 
  </tr> 
  <tr> 
   <td>volumechange</td> 
   <td>音量，volume属性被改变或静音状态muted属性被改变</td> 
  </tr> 
 </tbody> 
</table>

#  #

# 本地存储 #

## `web Storage`与本地数据库 ##

# HTML5中的两个重要内容：`Web Storage`与本地数据库。    #

`Web Storage`存储机制是对HTML4中`cookies`存储机制的一个改良，HTML5转试用改良后的`Web Storage`存储机制。

本地数据库是`hmtl5`中新增的一个功能，可以保存在客户端本地建立一个数据库。---大大减轻了服务器端的负担，加快了访问数据的速度。

*  了解`sessionStorage`和`localStorage`，以及两者之间的区别
 *  `openDatabase`方法创建与打开数据库
 *  `transaction`方法进行事务的处理

### sessionStorage ###

`sessionStorage` 属性允许你访问一个 `session Storage` 对象。它与 `localStorage` 相似，不同在于 `localStorage` 里面存储的数据没有过期时间设置，而存储在 `sessionStorage` 里面的数据在页面会话结束时会被清除。

页面会话在浏览器打开期间一直保持，并且重新**加载或恢复**页面仍会保持原来的页面会话。

在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这点和 `session cookies` 的运行方式不同。

语法

// 保存数据到 sessionStorage
    sessionStorage.setItem('key', 'value');
    
    
    // 从 sessionStorage 获取数据
    let data = sessionStorage.getItem('key');
    
    
    // 从 sessionStorage 删除保存的数据
    sessionStorage.removeItem('key');
    
    
    // 从 sessionStorage 删除所有保存的数据
    sessionStorage.clear();

![format_png 8][]

`Window sessionStorage` 属性

// 存储
    sessionStorage.setItem("lastname", "Jeskson");
    // 检索
    document.getElementById("result").innerHTML = sessionStorage.getItem("lastname");

#### 定义和使用 ####

`localStorage` 和 `sessionStorage` 属性允许在浏览器中存储 `key/value` 对的数据

`sessionStorage`用于临时保存同一窗口的数据，在关闭窗口或标签页之后将会删除这些数据。

> 如果你想在浏览器窗口关闭后还保留数据，可以使用 `localStorage` 属性

![format_png 9][]

### localStorage ###

只读的`localStorage` 属性允许你访问一个`Document` 源的对象 `Storage`；存储的数据将保存在浏览器会话中。

存储在 `localStorage`的数据可以长期保留；当页面被关闭时，存储在 `sessionStorage` 的数据会被清除 。

// 存储
    localStorage.setItem("lastname", "Jeskson");
    // 检索
    document.getElementById("result").innerHTML = localStorage.getItem("lastname");

在浏览器的`API`有两个：

*  `localStorage`
 *  `sessionStorage`

存在于`window`对象中：

1.  `localStorage`对应`window.localStorage`
2.  `sessionStorage`对应`window.sessionStorage`

#### `` ####

#### `localStorage` 的优势 ####

1.  `localStorage` 拓展了 `cookie` 的 `4K` 限制。

`localStorage` 将第一次请求的数据直接存储到本地，相当于一个 `5M` 大小的数据库，相比于 `cookie` 可以节约带宽，这个只有在高版本的浏览器中才支持的。

#### `localStorage` 的局限 ####

浏览器的大小不统一，并且在 `IE8` 以上的 `IE` 版本才支持 `localStorage` 这个属性。

目前的浏览器中都会把`localStorage`的值类型限定为`string`类型，这个在我们日常比较常见的`JSON`对象类型需要一些转换。

`localStorage`在浏览器的隐私模式下面是不可读取的。

*  `localStorage`本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。
 *  `localStorage`不能被爬虫抓取到。

### `` ###

### `localStorage` 使用 ###

使用 `localStorage`，我需要判断浏览器是否支持 `localStorage`：

if(! window.localStorage){
        alert("浏览器不支持localstorage");
        return false;
    }else{
        //主逻辑业务
    }

> 特别说明一下

`localStorage` 使用也是遵循同源策略的，不同的网站是不能共用相同的 `localStorage`。

`localStorage` 只支持 `string` 类型的存储。

> 一般我们会将 `JSON` 存入 `localStorage` 中，在 `localStorage` 会自动将 `localStorage` 转换成为**字符串**形式。

使用 `JSON.stringify()` 这个方法，将 `JSON` 转换为 `JSON` **字符串**。读取之后要将 `JSON` 字符串转换成为 `JSON` 对象，使用 `JSON.parse()` 方法。

## `` ##

## `HTML5 LocalStorage` 本地存储 ##

![format_png 10][]

##  ##

# 什么是`Web Storage` #

## 随着网络存储，Web应用程序可以在用户的浏览器本地存储数据。    ##

HTML5之前，应用程序数据必须存储在`cookie`中，包含在每一个服务器的请求。网络存储更安全，以及大量的数据可以在本地存储，而不会影响网站的性能。

`web`存储是每原点（每个域和协议）。所有页面，从一个起源，可以存储和访问相同的数据。

`Web Storage`就是在`Web`上存储数据的功能。

`Web Storage`功能可以在客户端本地保存数据的`Web Storage`功能。

## `` ##

## `cookies`存储永久数据存在的问题。 ##

![format_png 11][]

## `Web Storage`分两种： ##

1.  `sessionStorage`，将数据存储在`session`对象中，就是用户在浏览某个网站时，从进入到浏览器关闭的这段时间，`session`对象可以用来保存在这段时间内所要求保存的任何数据。
2.  `localStorage`，将数据保存在客户端本地的硬件设备，浏览器关闭后，数据还在，下次重新打开浏览器访问网站时就可以继续使用了。

###     ###

### 使用方法 ###

`sessionStorage`

*  保存数据：`sessionStorage.setItem(key,value)`
 *  读取数据：`变量=sessionStorage.getItem(key)`

`localStorage`

*  保存数据：`localStorage.setItem(key,value)`
 *  读取数据：`变量=localStorage.getItem(key)`

![format_png 12][]

### Web Storage 包含如下两种机制 ###

`sessionStorage`，`localStorage`

###     ###

### `Web Storage` 接口 ###

#### `` ####

#### `Storage` ####

允许你在一个特定域中设置，检索和删除数据和储存类型

#### `Window` ####

`Web Storage API` 继承于`Window` 对象,并提供两个新属性

*  `Window.sessionStorage`
 *  `Window.localStorage`

它们分别地提供对当前域的会话和本地`Storage` 对象的访问。

#### `StorageEvent` ####

当一个存储区更改时，存储事件从文档的 `Window` 对象上被发布。

*  `saveStorage`函数
 *  `loadStorage`函数
 *  `clearStorage`函数

将对象转换成`json`格式的文本数据，使用`json`对象的`stringify`方法。

var str=JSON.stringify(data);

将从`localStorage`中获取的数据转换成`JSON`对象。

var data = JSON.parse(str);

简单数据库脚本代码：

function saveStorage()
    {
        var data=new Object;
        data.name=document.getElementById('name').value;
        var str = JSON.stringify(data);
        localStorage.setItem(data.name, str);
    }
    function findStorage(id)
    {
        var find = document.getElementById('find').value;
        var str = localStorage.getItem(find);
        var data = JSON.parse(str);
        var result = data.name;
        var target = document.getElementById(id);
        target.innerHTML = result;
    }

## `` ##

## `cookie` （储存在用户本地终端上的数据） ##

##  ##

`Cookie`是保存在客户端的纯文本文件。比如`txt`文件。

客户端就是我们自己的本地电脑。当我们通过浏览器进行访问网页的时候，服务器会生成一个证书并返回给我的浏览器并写入我们的本地电脑。

这个证书是`cookie`。一般来说，`cookie`都是服务器端写入客户端的纯文本文件。

`Cookie` 文件由浏览器的支持，在浏览器中可以设置阻止`cookie`。这样服务器端就不能写入`cookie`到客户端了。

一般来说，`cookie`是不能阻止的，这样做就访问不到了。

![format_png 13][]

当服务器收到`HTTP`请求时，服务器可以在响应头里面添加一个`Set-Cookie`选项。

服务器使用`Set-Cookie`响应头部向用户代理发送`Cookie`信息。

![format_png 14][]

把不需要存储在服务上的数据，称为`SQLLite`的文件型`SQL`数据库。

##  ##

## 使用`SQLLite`数据库 ##

1.  创建访问数据库的对象
2.  使用事务处理

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

返回创建后的数据库访问对象。如数据库不存在，就创建该数据库。

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>第一个参数</td> 
   <td>数据库名</td> 
  </tr> 
  <tr> 
   <td>第二个参数</td> 
   <td>版本号</td> 
  </tr> 
  <tr> 
   <td>第三个参数</td> 
   <td>数据库的描述</td> 
  </tr> 
  <tr> 
   <td>第四个参数</td> 
   <td>数据库的大小</td> 
  </tr> 
 </tbody> 
</table>

调用`transaction`方法，用来执行事务处理。

`transaction`方法：

db.transaction(function(tx){
      tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS(id unique,Log)');
    })

### 用`executeSql`来执行查询语句 ###

`executeSql`方法：

transaction.executeSql(sqlquery,[],dataHandler,errorHandler);

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>第一个参数</td> 
   <td>需要执行的sql语句</td> 
  </tr> 
  <tr> 
   <td>第二个参数</td> 
   <td>需要sql语句中所使用到的参数的数组</td> 
  </tr> 
  <tr> 
   <td>第三个参数</td> 
   <td>执行sql语句成功时调用的回调函数</td> 
  </tr> 
  <tr> 
   <td>第四个参数</td> 
   <td>执行sql语句出错时调用的回调函数</td> 
  </tr> 
 </tbody> 
</table>

代码：

// 第二个参数
    transaction.executeSql('UPDATE people set age=? where name=?;', [age,name]);
    
    
    // 第三个参数
    function dataHandler(transaction,results){}
    
    
    // 第四个参数
    function errorHandler(transaction, errmsg){}

# 离线应用程序 #

![format_png 15][]

> `HTML5`中提供了一个本地缓存使用的`api`，可以实现离线`web`应用程序的开发。

##  ##

## 面试官问：什么是离线`web`应用程序 ##

##  ##

HTML5离线功能，对离线应用开发的支持就是HTML5中一个新特性。

关于离线的`web`应用程序，需要了解三个方面的功能：

1.  离线资源缓存
2.  在线状态检测
3.  本地数据存储

### 什么是离线资源缓存 ###

###  ###

`HTML5` 提供一种应用程序缓存机制，使得基于`web`的应用程序可以离线运行。

![format_png 16][]

就是用一种方式表名应用程序在离线工作时所需要的资源文件。这样，当浏览器在在线状态时，就可以把这些文件缓存到本地，往后，当用户在离线状态下，访问应用程序时，这些资源文件就会自动加载，从而让用户正常使用浏览。

在HTML5中，通过使用`cache manifest`，表明了缓存的资源，并支持自动和手动两种缓存方式。

![format_png 17][]

### 什么是在线检测 ###

开发者需要了解浏览器是否在线，对其进行操作，在HTML5中，提供了检测当前网络是否在线的方式。

### 什么是本地数据缓存 ###

###  ###

离线时，将数据存储到本地，为了满足需要，HTML5提供了`DOM Storage` 和 `Web SQL Database` 两种存储机制。

`HTML5`的 `DOM Storage`机制提供了一种方式让程序员能够把信息存储到本地的计算机上，在需要时获取。

#### `DOM Storage` 两个分类 ####

`DOM Storage` 分为 `sessionStorage` 和 `localStorage`。

## 本地缓存与浏览器网页缓存的区别 ##

1.  本地缓存是为整个web应用程序服务的，而浏览器的网页缓存是为单个网页服务的。
2.  任何网页都具有网页缓存，而本地缓存只有那些用户指定缓存的网页。
3.  网页缓存不是安全的，不可靠，也不知道它到底缓存了哪些网页，哪些资源。
4.  本地缓存是可靠的，可以控制对哪些内容进行缓存，不对哪些内容进行缓存。

##  ##

## 面试官问：什么是`manifest`文件 ##

##  ##

`web`应用程序的本地缓存是通过每个页面的`manifest`文件来管理的。`manifest`文件是一个简单的文本文件。

![format_png 18][]

为了让浏览器能够正常阅读文本文件，需要在`web`应用程序页面上的`html`标签的`manifest`属性中指定`manifest`文件的`url`地址。

##  ##

## 面试官问：什么是`applicationCache`对象 ##

##  ##

`applicationCache`对象代表了本地缓存，用它可以通知用户本地缓存已经被更新。

代码：

applicationCache.onUpdateReady = function(){
        // 本地缓存已被更新，通知用户
        alert()
    };

## 浏览器与服务器的交互 ##

##  ##

过程：

1.  浏览器请求访问地址
2.  服务器返回`index.html`网页
3.  浏览器解析`index.html`网页，请求网页上的所有 资源文件
4.  服务器返回所有资源文件
5.  浏览器处理`manifest`文件，请求`mnifest`中所有要求本地缓存的文件。
6.  服务器返回所有要求本地缓存的文件。
7.  浏览器对本地缓存进行更新，通知本地缓存被更新。

### `` ###

### `swapCache`方法 ###

###  ###

本地缓存准备被更新，该方法用来手工执行本地缓存更新。

#### 使用前提 ####

在`applicationCache`对象的`updateReady`事件被触发调用，`updateReady`事件只有在服务器上的`manifest`文件被更新，在`manifest`文件中所要求的资源文件下载到本地后。

代码：

applicationCache.onUpdateReady = function() {
        // 本地缓存已被更新，通知用户
        alert();
        applicationCache.swapCache();
    }

# 跨文档消息传输 #

什么是同源，所谓"同源"指的是"三个相同"。

1.  协议相同
2.  域名相同
3.  端口相同

同源的目的是为了保证用户信息的安全，防止恶意的网站窃取数据。所谓“同域限制”是指同样协议、同样域名、同样端口的地址进行通信。

> 使用跨文档消息传输功能，可以在不同网页文档，不同端口，不同域之间进行消息的传递。

对窗口对象的`message`事件进行监视。

代码：

window.addEventListener("message", function(){...},false);

使用`window`对象的`postMessage`方法向其他窗口发送消息。

otherWindow.postMessage(message, targetOrigin);

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>第一个参数</td> 
   <td>所发送的消息文本</td> 
  </tr> 
  <tr> 
   <td>第二个参数</td> 
   <td>接收消息的对象窗口的url地址</td> 
  </tr> 
 </tbody> 
</table>

# `` #

# `Web Sockets`通信 #

`web sockets`是`html5`提供的在`web`应用程序中客户端与服务端之间进行的非`http`的通信机制。

有了HTTP协议，为什么需要另一个协议。

因为HTTP协议有一个缺陷，通信只能由客户端发起。（客户端向服务器发出请求，服务器返回查询结果。）

`WebSocket`协议最大的特点就是，服务器可以自动向客户端推送消息，客户端也可以主动向服务器发送消息。

![format_png 19][]

`WebSocket` 对象作为一个构造函数，用于新建 `WebSocket` 实例。

实例对象的`onopen`属性，指定连接成功后的回调函数。

代码：

ws.onopen = function () {
      ws.send('Hello Server!');
    }

使用`addEventListener`方法

ws.addEventListener('open', function (event) {
      ws.send('Hello Server!');
    });

代码，客户端的简单示例：

![format_png 20][] ![format_png 21][]

代码：

// When the connection is open, send some data to the server
    // 实例对象的onopen属性，用于指定连接成功后的回调函数。
    connection.onopen = function () {
    // 实例对象的send()方法用于向服务器发送数据。
      connection.send('Ping'); // Send the message 'Ping' to the server
    };
    
    
    // Log errors
    // 实例对象的onerror属性，用于指定报错时的回调函数。
    connection.onerror = function (error) {
      console.log('WebSocket Error ' + error);
    };
    
    
    // Log messages from the server
    // 实例对象的onmessage属性，用于指定收到服务器数据后的回调函数。
    connection.onmessage = function (e) {
      console.log('Server: ' + e.data);
    };

> WebSocket 是什么？

![format_png 22][]

`WebSocket` 是一种网络通信协议。

代码：

var webSocket = new WebSocket("");

`url`字符串必须以`ws`或者`wss`（加密通信时）文字作为开头。

使用`WebSocket`对象的`send`方法对服务器发送数据，只能发送文本数据。

代码：

webSocket.send("data");

通过获取`onmessage`事件句柄来接收服务器传过来的数据：

代码：

webSocket.onmessage = function(event){
        var data = event.data;
    }

通过获取`onopen`事件句柄来监听`socket`的打开事件：

代码：

webSocket.onopen = function(event){
       // 开始通信时的处理
    }

通过获取`onclose`事件句柄来监听`socket`的关闭事件：

代码：

webSocket.onclose = function(event) {
        // 开始通信时的处理
    };

通过`close`方法来关闭`socket`，切断通信连接。

webSocket.close()

![format_png 23][] ![format_png 24][]

#### 一个典型的Websocket握手请求 ####

客户端请求

![format_png 25][]

服务器回应

![format_png 26][]

## 小记 ##

##     ##

1.  `Service Worker`和`cacheStorage`缓存及离线开发
2.  缓存和离线开发
3.  通俗易懂的方式介绍`Service Worker`
4.  了解JS中的全局对象`window.self`和全局作用域`self`
5.  了解`Cache`和`CacheStorage`
6.  借助`Service Worker`和`cacheStorage`离线开发的固定套路
7.  和`PWA`技术的关系
8.  离线`web`应用程序，当客户端本地与`web`应用程序的服务器没有建立连接时，也是能正常在客户端本地使用该`web`应用程序进行有关操作的。

# 参阅地址 #

developer.mozilla.org/zh-CN/

www.ruanyifeng.com/blog/2017/0…

# 最后 #

欢迎加我微信Jeskson(`xiaoda0423`)，拉你进技术群（掘金-前端高校），长期交流学习。

扫码关注公众号，订阅更多精彩内容。

![format_png 27][]

[format_png]: /images/20210724/ea915ff0d803459a9f698d6bba2b122a.png
[format_png 1]: /images/20210724/b4738e5a46644efdb9cd606f32275e82.png
[format_png 2]: /images/20210724/aba3609bd8da48f68a4f470f55ecefec.png
[format_png 3]: /images/20210724/ef5a113482ef40bdb946a2305f00c086.png
[format_png 4]: /images/20210724/1fb7bb91eee4452fad0438ccdc5554a7.png
[format_png 5]: /images/20210724/0f297b3cd4a0449aaed593128246b052.png
[format_png 6]: /images/20210724/4bde695711e54fed8cc332b588e6e9c4.png
[format_png 7]: /images/20210724/b06b43edc4284d99ae558ca5892afd23.png
[format_png 8]: /images/20210724/1feaabeb600f4ecdab07a419db87c503.png
[format_png 9]: /images/20210724/9852d5a092254d3ca7451be2f63b04b6.png
[format_png 10]: /images/20210724/c4a3daa3415d4452b3c347ecbec3a4da.png
[format_png 11]: /images/20210724/a8b0a0f1b6304e19935524382c9a88c4.png
[format_png 12]: /images/20210724/410a1a56fa7b473ca62bd89e9250768e.png
[format_png 13]: /images/20210724/1246fefb4f14471abe94d0b09688cae2.png
[format_png 14]: /images/20210724/378669d7510e4b1696ac97a5896b379b.png
[format_png 15]: /images/20210724/181a8a43e4c747d99cc5fc2f47f9441a.png
[format_png 16]: /images/20210724/f0cd121ad75e41c9bbf350b0851f8a48.png
[format_png 17]: /images/20210724/3dbe82e5a1d7401aac3659e9e1e7e49b.png
[format_png 18]: /images/20210724/a2a0abd39fd34b2f9bbaea35871a094c.png
[format_png 19]: /images/20210724/7a20ceb1ed794512bafee0974122d72f.png
[format_png 20]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6L2dpYWpHOFhZWUpOSTJhaGNQclFpYU9pYzdnQUdweUtTaWJJRHI3WHhUaWJ6dTYyTWV6R28weWpMbU9NdlZjTE1nZUFpYTZPOWY5aWJEOVN0RVYwU3RpYzkzazJhZ3cvNjQw?x-oss-process=image/format,png
[format_png 21]: /images/20210724/b9ac755c09a043d286351bfce9a8e5b2.png
[format_png 22]: /images/20210724/b9cf48e5076045608513ca432c8c3faa.png
[format_png 23]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6L2dpYWpHOFhZWUpOSTJhaGNQclFpYU9pYzdnQUdweUtTaWJJREN6RnJXR0VUd3JkemprV1l6ZGNqdklJTVlTY1Jvd2p6QWljTFZ4Y2RQOGg1aWJ2a3czRXhFSFhBLzY0MA?x-oss-process=image/format,png
[format_png 24]: /images/20210724/43ae8638bc774e138679d46780d2fc6e.png
[format_png 25]: /images/20210724/e0ca5fc69ac349528d44d72873b3492c.png
[format_png 26]: /images/20210724/dfef899bfc594b8bb9a67b47a650a284.png
[format_png 27]: /images/20210724/d0d6d66884ca45eeac511ebbe456542a.png