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>