node系列--【socket.io框架】

一、websocket协议

WebSocket是HTML5下一种新的协议。它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的。

二、socket.io框架

node.js诞生起就是支持websocket协议。但是如果用node原生语法与websocket原生函数等实现聊天软件应用比较困难。socket.io是一个大神封装好的websocket应用框架。

安装： npm i socket.io

服务端代码：

let http = require("http");
let fs = require("fs");

let sever = http.createServer((req,res)=>{
  fs.readFile("./index.html",(err,data)=>{
    res.end( data.toString() )
  })
})

sever.listen(3000,()=>{
  console.log("http服务已启动");
})

// 启动socket服务器
let io= require("socket.io")(sever);
io.on("connection",(socket)=>{
  console.log("有一个客户端连接了");
  // 服务器端定义事件
  socket.on("tiwen",(msg)=>{
   // 触发客户端自定义事件
    socket.emit("huida", msg+"你好吗")
  })
})

客户端代码：

<body>
  <h1>socket.io</h1>
  <input type="text" id="msg"><br>
  <button id="btn">聊天</button>
</body>
</html>
<!-- 引入秘密js -->
<script src="/socket.io/socket.io.js"></script>
<script>
  let socket = io();
  
  // 客户端自定义事件
  socket.on("huida",(data)=>{
    console.log( data );
    // 接收服务端返回的消息，将其渲染到网页上。
  })

  // 客户端主动触发服务端事件
  let  btn = document.getElementById("btn");
  btn.onclick = function(){
    let msg = document.getElementById("msg").value;
    socket.emit("tiwen", msg)
  }
</script>