长连接

发送请求只有第一次进行三次握手

cookie

过期时间：不设置则为会话时间

websocket

例子一：利用别人写好的服务

<!DOCTYPE html>
<html>
<body>
  <input id="text" />
  <button id="btn">发送</button>
  <div id="show"></div>

  <script>
    let websocket = new WebSocket('ws://echo.websocket.org/');

    websocket.onopen = function() {
      console.log('open');
      document.getElementById('show').innerHTML = 'connect';
    }
    websocket.onclose = function() {
      console.log('close');
    }
    websocket.onmessage = function(e) {
      console.log(e.data);
      document.getElementById('show').innerHTML = e.data;
    }
    document.getElementById('btn').onclick = function() {
      let val = document.getElementById('text').value;
      websocket.send(val);
    }
  </script>
</body>

</html>

例子二：自己写node websocket服务

npm i nodejs-websocket

./wsServer.html

var ws = require('nodejs-websocket');
var port = 3000;

var server = ws.createServer(function(conn){
  console.log('new connect');
  conn.on('text', function(str) {
    console.log('接收数据', str);
    conn.sendText(str + '!!!');
  });
  conn.on('close', function(code, reason) {
    console.log('close connect');
  });
  conn.on('error', function(err) {
    console.log('抛出异常', err);
  });
}).listen(port);

console.log('websocket server listening on port' + port);

启动服务：node wsServer.js

./ndex.html

<!DOCTYPE html>
<html>
<body>
  <input id="text" />
  <button id="btn">发送</button>
  <div id="show"></div>

  <script>
    let websocket = new WebSocket('ws://localhost:3000/');

    websocket.onopen = function() {
      console.log('open');
      document.getElementById('show').innerHTML = 'connect';
    }
    websocket.onclose = function() {
      console.log('close');
    }
    websocket.onmessage = function(e) {
      console.log(e.data);
      document.getElementById('show').innerHTML = e.data;
    }
    document.getElementById('btn').onclick = function() {
      let val = document.getElementById('text').value;
      websocket.send(val);
    }
  </script>
</body>

</html>

例子三：简单的聊天功能

./wsServer.js

var ws = require('nodejs-websocket');
var port = 3000;

var clientCount = 0;

var server = ws.createServer(function(conn){
  console.log('new connect');
  clientCount++;
  conn.nickName = 'user' + clientCount;
  var mes = {};
  mes.type = 'enter';
  mes.data = conn.nickName + ' common in';
  brodeCast(JSON.stringify(mes));
  conn.on('text', function(str) {
    console.log('接收数据', str);
    var mes = {};
    mes.type = 'message';
    mes.data = conn.nickName + ' says: ' + str;
    brodeCast(JSON.stringify(mes));
  });
  conn.on('close', function(code, reason) {
    console.log('close connect');
    var mes = {};
    mes.type = 'left';
    mes.data = conn.nickName + ' says: ' + ' common left';
    brodeCast(JSON.stringify(mes));
  });
  conn.on('error', function(err) {
    console.log('抛出异常', err);
  });
}).listen(port);

function brodeCast(str) {
  server.connections.forEach(function(connection){
    connection.sendText(str)
  })
};

console.log('websocket server listening on port' + port);

./index.html

<!DOCTYPE html>
<html>
<body>
  <input id="text" />
  <button id="btn">发送</button>

  <script>
    let websocket = new WebSocket('ws://localhost:3000/');

    function showMessage(data, type) {
      let div = document.createElement('div');
      div.innerHTML = data;
      if(type === 'enter') {
        div.style.color = 'blue';
      }else if(type === 'left') {
        div.style.color = 'red';
      }
      document.body.appendChild(div);
    }

    websocket.onopen = function() {
      console.log('open');
      document.getElementById('btn').onclick = function() {
        let val = document.getElementById('text').value;
        websocket.send(val);
      }
    }
    websocket.onclose = function() {
      console.log('close');
    }
    websocket.onmessage = function(e) {
      console.log(e.data);
      var mes = JSON.parse(e.data);
      showMessage(mes.data, mes.type);
    }

  </script>
</body>

</html>

命令

cp ../demo1/index.html .

m_review

20190223 js 浏览器知识

长连接

cookie

websocket

命令