navigation

[Deep 01] Execution context [Deep 02] Prototype chain [Deep 03] Inheritance [Deep 04] Event loop [Deep 05] Curri Bias function [Deep 06] Function memory [Deep 07] Implicit conversions and operators [Deep 07] Browser caching mechanism (HTTP caching mechanism) [Deep 08] Front-end security [Deep 09] Deep copy [Deep 10] Debounce Throttle [Deep 10] Front-end routing [Deep 12] Front-end modularization [Deep 13] Observer mode Publish subscribe mode Bidirectional data binding [Deep 14] Canvas [Deep 15] webSocket Webpack HTTP and HTTPS CSS- Interview Handwriting Promise

[react] Hooks

[Deployment 01] Nginx [Deployment 02] Docker deployVue project [Deployment 03] gitlab-CI

[source code – Webpack01 – precompiler] AST abstract syntax tree [source code – Webpack02 – Precompiler] Tapable [source code – Webpack03] hand written webpack-compiler simple compilation process [source code] Redux React-redux01 [source] Axios [source] vuex [source -vue01] Data responsive and initialized rendering [source -vue02] Computed responsive – Initialization, access, update process

Front knowledge

Some words

Specify specify stable amount optional object ordinary omitted omitted broadcast outdatedCopy the code

NRM – nrm

  • NRM (switch NPM source)(NPM registry manager, can switch NPM mirror address)
  • NPM, CNPM, Taobao, NJ (Nodejitsu), etc
  • Command: a command
  • Error handling after global installation
    • NRM: Could not load file D:\Program Files\nodejs\ NRM. Ps1 because running scripts is forbidden on this system.
    • The solution:
      • (1) Open CMD as administrator and enter the following command
      • (2) The set-executionpolicy RemoteSigned command changes the ExecutionPolicy on the computer to RemoteSigned. Enter Y to determine
    • ExecutionPolicy: indicates the ExecutionPolicy
    • Execution strategies can help you execute untrusted scripts
(1) install
npm install -g nrm


(2) useage
nrm [options] [command] options - h, -- help / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --help- V, --version //-------------------------------- version number commonds nrm ls / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- to list all the source NRM use < registry > / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - use which source NRM add < registry > < url > [home] / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- add source, (1) the name of the registry is the source, Can take (2) random url source address NRM del < registry > / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - delete the source NRMtest[registry] / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- speed, returns the response timeCopy the code

NVM – nvm

  • NVM is used to change the node and NPM versions
  • You can use NVM-Windows on Windows
  • Tutorial:
  • Matters needing attention!!!!!!!!!!!!!!!!!!!
    • If node has been installed in the system before, perform the following steps to uninstall the node

Useage NVM use < version > [arch] / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- use which version of the node, the (32-bit or 64 - bit arch, Not a must) MVM list [available] / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- show available version of the node list, (the available effective, NVM install <version> [arch] // ------------- Install the specified node version. Version indicates the specific version. NVM uninstall <version>Copy the code
- check the global installed package: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- NPM ls - g - the depth = 0 view global installation package: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- NPM list - g - the depth = 0 / / ls and the list can be unloaded local global installation package: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- NPM uninstall - g XXXX check need to update the global package: -- -- -- -- -- -- -- -- -- -- -- -- -- NPM outdated - g - the depth = 0 / / outdated outdated means NPM info XXXX / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- remote NPM package information The info XXXX version / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the latest version of the remote, NPM info XXXX versions / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - all the remote version numberCopy the code

Window. postMessage Cross-domain communication

  • Window. postMessage enables cross-domain information interaction, communication between two Web browser tabs, IFrame communication, and more
  • otherWindow.postMessage(message, targetOrigin, [transfer]);
  • Note: after targetwindow.open (), you can’t postMessage cross-domain until the target page has loaded, but in cross-domain situations, you can’t onload the targetWindow, so you can use setTimeout. The same is true for IFrame 
(1) otherwindow.postMessage (message, targetOrigin, (1) otherwindow-otherwindow refers to a reference to another window 1. Iframe contentWindow property 2. Window.open () returns a window object 3. Window.frames 4. Window.frames 4. Window.frames 4. Window.frames 4. Window.frames 4. Window.frames 4. Window.frames 4. That is, (top) or (parent) (2) message-message means that data sent to another window - message will be serialized, So without the serialization (3) targetOrigin!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! - targetOrigin: Set the source of the target window (a string of protocols, domain names, ports), specify which Windows can receive message events - if any of the protocols, domain names, ports does not meet the value provided by targetOrigin at the time of sending a message, The message will not be sent - it will only be sent if all three match - The value of targetOrigin can be the (*) sign, (4) Transfer-Transfer is a string of Transferable objects that are transferred at the same time as message - the ownership of these objects will be transferred to the recipient of the message, but the sender will no longer retain ownership of the message. -- -- -- -- -- -- -- -- -- -- -- -- -- -- - otherWindow. PostMessage (message, targetOrigin, [transfer]) to receive the message: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- window. The addEventListener ('message', (data) => {console.log(data.data, data.origin)}, false) note: ----------------- communicates precisely with (targetOrigin - validates the receiver) and (data.origin - validates the sender) - data.origin and data.source and data.data - In the listener function on the receiver, note origin andsource- Origin: ------------- The value is a string consisting of the protocol, domain name, and port of the sender -source: -- -- -- -- -- -- -- -- -- -- -- -- -- the sender window object reference data: -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the received data window. The addEventListener ("message", receiveMessage, false); // The TAB page that receives the message listens for the message eventfunction receiveMessage(event) {
  // For Chrome, the origin property is inThe event. The originalEvent / / object. / / here is inaccurate and chrome without this attribute / / var origin = event. The origin | | event. The originalEvent. Origin; var origin = event.originif(origin ! = ="http://example.org:8080")
    return; / /... } (2) Note: - Always specify the exact destination origin when using postMessage to send data to other Windows, instead of using * - Use Origin andsourceVerify (sender's) identity (3) instance: -------------- A page <! 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""> <div style =" box-sizing: border-box; color: RGB (74, 74, 74)"a-send"< 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) // Note: // 1.a.post Message can only be sent when the target page (b page) has finished loading // 2.a.post message second parameter, indicating targetOrigin target source, // 3. After the targetOrigin setting, Only the target window completely accords with the value of targetOrigin string to receive news < / script > < / body > < / HTML > -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- < b page! 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 page </div> <script> window.addeventListener ('message', (data) = > {/ / -- -- -- -- -- to monitor the message event console. The log (data)},false)
  </script>
</body>
</html>
Copy the code

Summary of the websocket

  • Websocket is an application layer protocol, based on THE HTTP protocol, is a two-way communication protocol
  • HTTP also establishes persistent connections in version 1.1Connection:Keep-alive
    • But a persistent connection is essentially a request response.
    • And (Websocket) is (full-duplex communication)
  • TCP is a transport layer protocol
  • HTTP and WebSocket are application-layer protocols
  • IP is a network layer protocol

WebSocket client API

new WebSocket(url)

  • const ws = new WebSocket('ws://localhost:8080')
  • WebSocket is used as a constructor to create WebSocket instances
  • Ws: indicates webSocket protocol
  • WSS: indicates the WebSocket encryption protocol

webSocket.readyState

  • The readyState property returns the current state of the instance object
CONNECTING: 0 --------------- : CONNECTING to OPEN: 1 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - said the connection is successful, can communicate the CLOSING: 2 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- said connection is CLOSED CLOSED: 3 ------------------- : The connection is closed or fails to be openedCopy the code

webSocket.onopen

  • Specifies the callback function for a successful connection
  • Specify a callback function:ws.onopen = function(){}
  • Specify multiple callback functions:ws.addEventListener('open', function(){})

webSocket.onclose

  • Specifies the callback function after the connection is closed

webSocket.onmessage

  • Specifies a callback function for receiving server data
  • Note: There are two possible data returns from the server (text) or (binary data – blob objects or Arraybuffer objects)
  • Data type: binaryType
    • ws.binaryType = 'blob'
    • ws.binaryType = 'arraybuffer'
    • -Dan: Well, that’s a binary
ws.onmessage = function(event) { var data = event.data; // Handle the data}; ws.addEventListener("message".function(event) { var data = event.data; // Processing 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"); }}Copy the code

webSocket.send()

  • Wx.send () is used to send data to the server

webSocket.bufferedAmount

  • Wx. bufferedAmount Indicates how many bytes of binary data have not been sent and can be used to determine whether the send is complete
  • Wx. bufferedAmount === 0 Indicates that the sending is complete
  • A. amount B. amount C. amount D. amount

webSocket.onerror

  • Wx.onerror specifies the callback function when an error is reported

Use webSocket and nodejs-WebSocket simple chat rooms

Client: <! 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> <inputtype="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') / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- generated websocket instance objects / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- parameter is the url / / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- Note: The protocol is (WS ://) or (WSS :// encryption protocol) ws.onOpen =function() {/ / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- onopen: callback after the connection is successful / / ws. Send ('Client => Message string sent to server') / / -- the send () : the server sends the message 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) {/ / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the onmessage: received the server returns the data to trigger the callback const p = document. The createElement method ('p')
      p.innerHTML = e.data
      document.body.appendChild(p)
    }
/*
    ws.addEventListener('open', connectedCallback, false)
    function connectedCallback() {
      ws.send('Client => Message string sent to server')
    }
    ws.onopen = function() {
      ws.send('Client => Message string sent to server')
    }
    ws.onmessage = function(e) {
      console.log(e.data)
    }
*/
  </script>
</body>
</html>

Copy the code
Server: const ws = require('nodejs-websocket')

const server = ws.createServer(function(conn) {
  console.log("New connection")
  conn.on("text".function(STR) {/ / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- from the client data is text type is triggered when the console. The log ("Received "+str)
    // conn.sendText(str)
    const data = JSON.parse(str)

    switch(data.type) {
      case 'name':
          conn.nickname = data.value;
          broadcast(data.value + 'Joined the room');
          break;
      case 'chat':
          console.log(data.value, 'data.value');
          broadcast(data.value);
          break;
      default:
        break; }})functionBroadcast (STR) {/ / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- broadcast: Broadcast server. Connections. ForEach ((conn) = > {conn. SendText (STR)})} conn. On ("close".function(code, a tiny) {/ / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - close the connection when trigger the console. The log ("Connection closed")
    broadcast(conn.nickname + 'Left the room')
  })
  // conn.send('Server => Message to client')
  conn.on('error', (err) = > {/ / -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- processing error console. The log (err)})}) server. Listen (5555, () => console.log('server runing') // ------------- Listening portCopy the code

data

Juejin. Cn/post / 684490… Nguyen other www.ruanyifeng.com/blog/2017/0… NVM and NRM juejin. Cn/post / 684490… NRM’s official website: github.com/Pana/nrm NRN installed input command error: blog.csdn.net/ougexingfub… Nodejs-websocket:github.com/sitegui/nod… OtherWindow. PostMessage: juejin. Cn/post / 684490…