[深刻15] WebSocket

时间 2020-04-12

标签深刻 websocket 繁體版

原文原文链接

[深刻01] 执行上下文
 [深刻02] 原型链
 [深刻03] 继承
 [深刻04] 事件循环
 [深刻05] 柯里化偏函数函数记忆
 [深刻06] 隐式转换和运算符
 [深刻07] 浏览器缓存机制（http缓存机制）
[深刻08] 前端安全
 [深刻09] 深浅拷贝
 [深刻10] Debounce Throttle
[深刻11] 前端路由
 [深刻12] 前端模块化
 [深刻13] 观察者模式发布订阅模式双向数据绑定
 [深刻14] canvas
[深刻15] webSocket
[深刻16] webpack
[深刻17] http 和 https
[深刻18] CSS-interview
[react] Hookshtml

[部署01] Nginx
[部署02] Docker 部署vue项目
 [部署03] gitlab-CI前端

[源码-webpack01-前置知识] AST抽象语法树
 [源码-webpack02-前置知识] Tapable
[源码-webpack03] 手写webpack - compiler简单编译流程vue

前置知识

一些单词

specify：指定
stable：稳定的
amount：合计
optional：可选的 
optional object：可选对象
ordinary：普通的
omitted：省略的
broadcast：广播
outdated：过期的
复制代码

NRM - nrm

nrm 的做用是 ( 切换npm源 ) (npm的注册表管理器，能够切换npm的镜像地址)
npm, cnpm, taobao, nj(nodejitsu)等
command：命令
全局安装后，报错处理
- nrm : 没法加载文件 D:\Program Files\nodejs\nrm.ps1，由于在此系统上禁止运行脚本。
- 解决办法：
  - (1) 用管理员身份打开cmd，输入如下命令
  - (2) set-ExecutionPolicy RemoteSigned命令将计算机上的执行策略更改成 RemoteSigned,输入Y肯定
- ExecutionPolicy：执行策略
- 执行策略能够帮助你执行不信任的脚本

(1) install
npm install -g nrm


(2) useage
nrm [options] [command] 

options
-h，--help //----------------------------------- help
-V，--version //-------------------------------- version number

commonds
nrm ls //------------------------------------------- 列出全部源
nrm use <registry> //------------------------------- 使用具体哪一个源
nrm add <registry> <url> [home] //------------------ 添加源，(1) registry是源的名字，能够随便取 (2) url源地址
nrm del <registry> //------------------------------- 删除源
nrm test [registry] // ----------------------------- 测速，返回响应的时间
复制代码

NVM - nvm

nvm 用于切换 node 和 npm 版本
windows系统上能够用 nvm-windows
教程：
注意事项 !!!!!!!
- 若是以前安装过node即系统中存在node，须要将node卸载干净，步骤以下

useage

nvm use <version> [arch] //------------------ 使用哪一个版本的node，（arch表示32位或64位，非必须）
mvm list [available] // --------------------- 展现可用的node版本列表，（available表示有效，非必须）
nvm install <version> [arch] // ------------- 安装指定的node版本，version表示具体的版本号
nvm uninstall <version>
复制代码

----
查看全局安装的包：----------------- npm ls -g --depth=0
查看全局安装的包：----------------- npm list -g --depth=0 // ls 和 list 均可以
卸载本地全局安装包：--------------- npm uninstall -g xxxx
查看须要更新的全局包：------------- npm outdated -g --depth=0 // outdated是过期的意思

npm info xxxx // ------------------------------ 远程包的信息
npm info xxxx version // ---------------------- 远程最新的版本号
npm info xxxx versions // --------------------- 远程全部版本号
复制代码

window.postMessage 跨域通讯

window.postMessage 能够实现跨域信息交互，两个web浏览器标签页之间的通讯，IFrame 通讯等
otherWindow.postMessage(message, targetOrigin, [transfer]);

注意：在targetWindow.open()后，要等到目标页面加载完成才能进行 postMessage 跨域通讯，可是在跨域的状况下，没法对目标窗口进行onload监听，因此能够用 setTimeout延时，对于IFrame同理

(一)
otherWindow.postMessage(message, targetOrigin, [transfer]) 跨域通讯

(1) otherWindow
- otherWindow指的是其余窗口的一个引用
1. iframe 的 contentWindow 属性
2. window.open() 返回的一个窗口对象
3. 命名过或数值索引的 window.frames
4. 两个窗口之间
  - a -> b，otherWindow是b窗口
  - b -> a，otherWindow是a窗口，即 ( top ) 或者 ( parent )

(2) message
- message指发送给其余窗口的数据
- message会被序列化，因此无需本身序列化

(3) targetOrigin     !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
- targetOrigin：设置目标窗口的源(协议域名端口组成的字符串)，指定哪些窗口能 ( 接收 ) 到消息事件
- 在 ( 发消息 ) 的时候，若是( 目标窗口 ) 的 ( 协议，域名，端口) 任意一项不知足 targetOrigin 提供的值，消息就不会发送
- 三者要所有匹配才会发送
- targetOrigin的值能够是 (  *  ) 号，表示全部窗口都能接收到消息

(4) transfer
- transfer 是一串和message同时传递的 Transferable 对象
- 这些对象的全部权将被转移给消息的接收方，而发送一方将再也不保有全部权



发消息：--------------- otherWindow.postMessage(message, targetOrigin, [transfer])
收消息：--------------- window.addEventListener('message', (data) => {console.log(data.data, data.origin)}, false)
注意：----------------- 经过 ( targetOrigin - 验证接收方 ) 和 ( data.origin - 验证发送方 ) 来精确通讯


- data.origin 和 data.source 和 data.data
- 在接收端的监听函数中，注意 origin 和 source
- origin: ------------- 发送方的协议，域名，端口组成的字符串
- source：------------- 发送方窗口对象的引用
- data：--------------- 接收到的数据
window.addEventListener("message", receiveMessage, false); // 接收消息的tab标签页面监听message事件
function receiveMessage(event) {
  // For Chrome, the origin property is in the event.originalEvent
  // object. 
  // 这里不许确，chrome没有这个属性
  // var origin = event.origin || event.originalEvent.origin; 
  var origin = event.origin
  if (origin !== "http://example.org:8080")
    return;
    // ...
}


(二)
注意事项：
- 使用postMessage将数据发送到其余窗口时，始终要指定精确的目标origin，而不是使用 *
- 使用 origin 和 source 验证 ( 发件人 ) 的身份


(三)
实例：

--------------
a页面
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="a-open">点击，打开b页面</div>
  <div id="a-send">点击，发送消息，a->b</div>
  <script>
    const aOpen = document.getElementById('a-open')
    const aSend = document.getElementById('a-send')
    var a = null
    aOpen.addEventListener('click', () => a = window.open('http://127.0.0.1:5500/b.html'), false)
    aSend.addEventListener('click', () => a.postMessage('this message is a to b', 'http://127.0.0.1:5500'), false)
    // 注意：
    // 1. a.postMessage只有在目标页面(b页面)的页面加载完成时才能发送
    // 2. a.postMessage的第二个参数，表示targetOrigin目标源，即目标窗口的协议域名端口组成的字符串
    // 3. targetOrigin设置事后，只有目标窗口彻底符合targetOrigin字符串的值才能接收到消息
  </script>
</body>
</html>


---------------
b页面
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>b页面</div>
  <script>
    window.addEventListener('message', (data) => { // ----- 监听message事件
      console.log(data)
    }, false)
  </script>
</body>
</html>
复制代码

websocket概述

websocket是应用层协议的一种，创建在http协议之上，是一种双向通讯的协议
HTTP在1.1版本中也能创建长链接 Connection:Keep-alive
- 可是 ( HTTP ) 创建的长链接本质上仍是 request response 这样的形式，即 ( 一个request对应一个response )
- 而 ( websocket ) 是 ( 全双工通讯 )
TCP是传输层协议
HTTP 和 websocket 是应用层的协议
IP是网络层协议

WebSocket 客户端api

new WebSocket(url)

const ws = new WebSocket('ws://localhost:8080')
WebSocket 做为构造函数，用于新建 websocket 实例
ws：表示websocket协议
wss：表示websocket加密协议

webSocket.readyState

readyState 属性返回实例对象的当前状态，一共4种

CONNECTING：0 --------------- 表示正在链接
OPEN: 1 --------------------- 表示链接成功，能够通讯了
CLOSING：2 ------------------ 表示链接正在关闭
CLOSED：3 ------------------- 表示链接已经关闭，或者链接打开失败
复制代码

webSocket.onopen

指定链接成功后的回调函数
指定一个回调函数：ws.onopen = function(){}
指定多个回调函数：ws.addEventListener('open', function(){})

webSocket.onclose

指定链接关闭后的回调函数

webSocket.onmessage

指定收到服务器数据后的回调函数
注意：服务器返回的数据有两种可能 ( 文本 ) 或 ( 二进制数据 - blob对象或Arraybuffer对象 )
判断数据数据类型： binaryType
- ws.binaryType = 'blob'
- ws.binaryType = 'arraybuffer'
- binary：二进制的

ws.onmessage = function(event) {
  var data = event.data;
  // 处理数据
};

ws.addEventListener("message", function(event) {
  var data = event.data;
  // 处理数据
});


----------


ws.onmessage = function(event){
  if(typeof event.data === String) {
    console.log("Received data string");
  }

  if(event.data instanceof ArrayBuffer){
    var buffer = event.data;
    console.log("Received arraybuffer");
  }
}
复制代码

webSocket.send()

wx.send() 用于向服务器发送数据

webSocket.bufferedAmount

wx.bufferedAmount 表示还有多少字节的二进制数据没有发送出去，能够用来判断是否发送结束
wx.bufferedAmount === 0 表示发送结束
amount：合计的意思

webSocket.onerror

wx.onerror 指定报错时的回调函数

使用 websocket 和 nodejs-websocket 简单聊天室

客户端：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="text" id="name-input">
  <button id="name-button">建立名字</button>
  <input type="text" id="input">
  <button id="button">发送消息</button>
  <script>
    const inputDom = document.getElementById('input')
    const button = document.getElementById('button')
    const nameInput = document.getElementById('name-input')
    const nameButton = document.getElementById('name-button')
    const ws = new WebSocket('ws://localhost:5555') 
    // ----------------------------------------------------- 生成websocket实例对象
    // ----------------------------------------------------- 参数是url
    // ----------------------------------------------------- 注意：协议是 (ws:// ) 或者 (wss:// 加密协议)
    ws.onopen = function() { // ---------------------------- onopen：链接成功后的回调
      // ws.send('客服端 => 发送给服务端的消息字符串') // -- send()：向服务端发送消息
      nameButton.addEventListener('click', () => {
        nameButton.setAttribute('disabled', 'disabled')
        ws.send(JSON.stringify({
          type: 'name',
          value: nameInput.value
        }))
      }, false)
      button.addEventListener('click', () => {
        ws.send(JSON.stringify({
          type: 'chat',
          value: inputDom.value,
        }))
      }, false)
    }
    ws.onmessage = function(e) { // --------------------------- onmessage：收到服务端返回数据时触发的回调
      const p = document.createElement('p')
      p.innerHTML = e.data
      document.body.appendChild(p)
    }
/*
    ws.addEventListener('open', connectedCallback, false)
    function connectedCallback() {
      ws.send('客服端 => 发送给服务端的消息字符串')
    }
    ws.onopen = function() {
      ws.send('客服端 => 发送给服务端的消息字符串')
    }
    ws.onmessage = function(e) {
      console.log(e.data)
    }
*/
  </script>
</body>
</html>

复制代码

服务端：
const ws = require('nodejs-websocket')

const server = ws.createServer(function(conn) {
  console.log("New connection")
  conn.on("text", function (str) { // ------------------------ 客户端发来的数据是text类型时触发
       console.log("Received "+str)
    // conn.sendText(str)
    const data = JSON.parse(str)

    switch(data.type) {
      case 'name':
          conn.nickname = data.value;
          broadcast(data.value + '加入了房间');
          break;
      case 'chat':
          console.log(data.value, 'data.value');
          broadcast(data.value);
          break;
      default:
        break;
    }
  })
  function broadcast(str) { // --------------------------------------- broadcast：广播
    server.connections.forEach((conn) => {
      conn.sendText(str)
    })
  }
    conn.on("close", function (code, reason) { // --------------------- 关闭链接时触发
    console.log("Connection closed")
    broadcast(conn.nickname + '离开了房间')
  })
  // conn.send('服务端 => 发给客服端的消息')
  conn.on('error', (err) => { // -------------------------------------- 处理错误
    console.log(err)
  })
})
server.listen(5555, () => console.log('server runing')) // ------------- 监听端口
复制代码

资料

juejin.im/post/5a1bdf…
阮一峰 www.ruanyifeng.com/blog/2017/0…
nvm 和 nrm juejin.im/post/5c9040…
nrm官网：github.com/Pana/nrm
nrn安装后输入命令报错：blog.csdn.net/ougexingfub…
nodejs-websocket：github.com/sitegui/nod…
otherWindow.postMessage：juejin.im/entry/57d7c…node

[深刻15] WebSocket

导航

前置知识

一些单词

NRM - nrm

NVM - nvm

window.postMessage 跨域通讯

websocket概述

WebSocket 客户端api

new WebSocket(url)

webSocket.readyState

webSocket.onopen

webSocket.onclose

webSocket.onmessage

webSocket.send()

webSocket.bufferedAmount

webSocket.onerror

使用 websocket 和 nodejs-websocket 简单聊天室

资料