WebSocket、socket.io

WebScoket

• WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议

先外部安装

 npm i ws -S

• 创建websocket服务器

var WebScoketServe = require("ws").Server;
//npm i ws -S

let wss = new WebScoketServe({
    
     port: 8986 });
//connection连接
wss.on("connection", function(ws) {
    
    
    let obj = {
    
    
            name: "小任",
            age: 20
        }
        //推送数据
        //限定时间
    setInterval(() => {
    
    
    查询数据库中的信息，并推送给页面
        ws.send(JSON.stringify(obj));
    }, 2000)
		ws.onmessage = function(d) {
    
    
            //插入到数据中
            console.log(d.data);
        }
    //错误信息
    ws.onerror = function(err) {
    
    
        console.log(err);
    }
})

• 客户端连接服务器

//协议 域名 端口号 必须全部一致
        //非同源：跨域的问题
        //连接服务器   建立握手
        let ws = new WebSocket("ws://localhost:8986");
        打开协议
        ws.onopen = function() {
    
    
            console.log("发送成功")
        }

        ws.onmessage = function(data) {
    
    
            console.log(data);
        };
        document.querySelector(".btn").onclick = function() {
    
    
                let iptValue = document.querySelector(".ipt").value;
                console.log(iptValue);
                ws.send(iptValue);
            }

关闭协议:关闭协议后不能发送数据
ws.close();

socket.io模块

安装：npm i socket.io -S
使用

const server = require("http").createServer(app.callback());
const io = require("socket.io")(server);

//sokcet  当建立连接后，传入回调函数中的参数
//        他代表当前连接者
io.on("connection", (socket) => {
    
    
    console.log("有链接");
    let obj = {
    
    
        name: "小任",
        age: 20
    }

    //传递数据
    //setInterval(() => {
    
    
    // socket.emit("getData", obj);
    //}, 1000)
    socket.on("addData", (data) => {
    
    
        console.log(data);
        // socket.emit("getData", obj);
        socket.broadcast.emit("getData", data)
    })

})

客户端建立连接
        let socket = io.connect();
        socket.on("getData", (data) => {
    
    
            console.log(data);
            document.querySelector(".s").innerHTML = data.name

        })
        document.querySelector(".btn").onclick = function() {
    
    
            let iptValue = document.querySelector(".ipt").value;
            socket.emit("addData", iptValue);
        }