前端轮循、sse、 websocke、socket.io模块

前端轮循获取数据

前端轮循环，获取数据；

• 循环ajax请求 ，获取数据
• 消耗性能，消耗资源，不推荐；

ajax 最流行的请求框架没有之一 局部刷新加载 ajzx自身是没办法跨域的，需要借助工具
同源策略： 协议，域名，端口号 都一样；
使用jq中的ajax发送请求，获取最新的数据

function render(){
    $.ajax({
        url:"/getData",  //路径
        success(res){ //请求+响应完成后，执行的方法(名字是固定的)
            // console.log("我是前端显示的："+res);
            let str = "";
            res.forEach(v => {  //循环把res中的内容往外拿出来放在v里
                if(v.username == "index" ){
                    str += `<li class="chat-right">${v.content}：${v.username}</li>`
                }else{
                    str += `<li class="chat-left">${v.username}：${v.content}</li>`
                }
                
            });
            document.querySelector(".chat-show").innerHTML = str;  //加载到对话框
            document.querySelector(".chat-show").scrollTop = 10000;//距离顶端的滚动距离
        }
    });
} 
// 轮询
setInterval(()=>{
    render();
},1000);

document.querySelector(".input-text button").onclick = function(){
    let content = $(".input-frame").val();
    // console.log(content);
    $.ajax({  //发送给服务器
        url:"/addChat",
        method:"post",  //请求的方式 get  post
        data:{
            content,
            username:"index"
        },
        success(res){   //成功后有了新的数据之后再去获取，没有新数据不获取，浪费感情
            if(res.status === 1){
                render(); // 获取数据
            }else{
                console.log(res);
            }
        }
    });
}

sse服务器推送数据

前端页面

 let source =  new EventSource("/sse");
       //建立连接后
       source.onopen = function(){
            console.log("建立连接后");
        }
        //拿到数据
        source.onmessage = function(d){
            console.log(d);
        }
        //如果有错误，返回错误信息
        source.error = function(err){
            console.log()
        }

服务端设置

设置头部

• “Content-type”,“text/event-stream”
  返还数据格式
• data:声明数据开始
• \r\n\r\n标志数据结尾

websocke

WebSocket 是 HTML5 开始提供的⼀种在单个 TCP 连接上进⾏全双⼯通讯的协议;
创建websocket服务器；

var WebSccketServer =  require("ws").Server;
let wss = new WebSccketServer({post:8989});

//connection  :连接
wss.on("connection",function(ws){
    
    let obj ={
        name:"小郝",
        age:20
    }
    //推送数据
    setInterval(()=>{
        //查询数据库中的信息，并推送给页面
        ws.send(JSON.stringify(obj));
    },1000);
   
    //接受数据
    ws.onmessage = function(d){
        console.log(d.data);
    }

    //错误信息
    ws.onerror = function(err){
        console.log(err);
    }
})

前端页面

//连接服务器
       let ws = new WebSocket("ws://localhost:8989");
       
       ws.onopen = function(){
           console.log("连接成功");
       }

       //接受数据
       ws.onmessage = function(d){
           console.log(d.data);
       }

       document.querySelector(".btn").onclick = function(){
          let iptValue = document.querySelector(".ipt").value;
        //   console.log(iptValue);
        
          //推送数据
          ws.send("iptValue");
       }

socket.io模块

服务端
const server = require(‘http’).createServer(app.callback());
const io = require(‘socket.io’)(server);
server.listen(3000);

客户端

let socket = io.connect();
this.emit(“clientfn”,“hello i am client”);
socket.on(“message”,function(data){}