前端轮循获取数据
前端轮循环,获取数据;
- 循环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){}