WebSocket

关于 WebSocket

WebSocket 与 Http ？

HTTP 协议有一个缺陷：通信只能由客户端发起, 做不到服务器主动向客户端推送信息。

单向请求: 注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。只能使用 轮询, 每隔一段时候，就发出一个询问，了解服务器有没有新的信息。轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）

WebSocket 协议: 服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的 双向平等 对话，属于服务器推送技术的一种.

`socket.io` 示例 Demo

服务端代码 socket.js, node socket.js

var http = require('http');
var fs = require('fs');

//创建服务器，返回 index.html
var app = http.createServer((req, res) => {
  fs.readFile('index.html', (err, data)=> {
    //指定res head 及 data
    res.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8' });
    res.end(data);
  })
})

//创建连接
var io = require('socket.io')(app);
io.on('connection', client => {
  console.log("连接建立")
  //服务器端通过 emit 广播，通过 on 接收广播
  client.on('add', data => { 
    console.log(data);
    io.emit('to-client', '我是服务器的数据' + data.client)
  });

});

app.listen(3000);

客户端 index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>聊天室1</title>
</head>
<body>
  <button id="button">给服务发送数据</button>
</body>
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
<script>
  var socket = io('http://localhost:3000');
  document.getElementById('button').onclick = function() {
    socket.emit('add', {
      'client': '我是客户端的数据'
    })
  }
  //监听服务端的广播
  socket.on('to-client', function(data){
    console.log(data);
  })
</script>  
</html>

WebSocket

关于 WebSocket

WebSocket 与 Http ？

socket.io 示例 Demo

相关资料

`socket.io` 示例 Demo