欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前后端通讯的几种方式

程序员文章站 2024-03-20 18:03:22
...

EventSource

  • 使用方法
var evtSource = new EventSource(url); // 服务器URL
复制代码
  • 接收
evtSource.onmessage = function(e) {
  var newElement = document.createElement("li");
  
  newElement.innerHTML = "message: " + e.data;
  document.body.appendChild(newElement);
}
复制代码
  • 其它类型的事件
evtSource.addEventListener("ping", function(e) {
  var newElement = document.createElement("li");
  
  var obj = JSON.parse(e.data);
  newElement.innerHTML = "ping at " + obj.time;
  document.body.appendChild(newElement);
}, false);
复制代码

web code demo
server code demo

服务器端中在传输数据时将头中的Content-Type设置为text/event-stream


WebSocket

  • 使用方法
var ws = new WebSocket("ws://localhost:8080", [protocols]);
复制代码
  • 属性
    • ws.binaryType //使用二进制的数据类型连接
    • ws.protocol //服务器选择的下属协议只读
    • ws.readyState //链接状态只读
    • ws.bufferedAmount //未发送至服务器的字节数只读
    • ws.extensions //服务器选择的扩展只读
    • ws.onclose //关闭前的回调函数
    • ws.onerror //连接失败后的回调函数
    • ws.onmessage //从服务器接受到信息时的回调函数
    • ws.onopen //连接成功后的回调函数
    • ws.url //WebSocket的绝对路径
  • 方法
    • ws.close([code[, reason]]) //关闭当前链接
    • ws.send(data) //发送数据
  • 工具
    • Socket.io //基于长轮询/WebSocketNode.js库,包括客户端
    • ws //WebSocket客户端和服务器 Node.js库

Ajax

  • 简介
    • 新技术的一种集合
    • 其中包括:HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, 以及最重要的 XMLHttpRequest object
  • XMLHttpRequest (XHR)
    • 可以用来获取任何类型的数据,还支持ftp协议
    • 使用方法
      var req = new XMLHttpRequest();
      req.onload = (e)=>{}; // ES6语法
      req.onreadystatechange = (e)=>{/*req.readyState*//*req.status*/}
      req.onerror = (e)=>{};
      req.open(protocol, url, async);
      req.setRequestHeader(); // 设置请求头
      req.send([params]); //POST时可以填写params String,GET使用url形式传递数据
      
      //POST可以传输json,对数据没有限制等.GET只能以key-value形式传递数据,使用&符连接
    复制代码

2018-11-9 17:33

WebRTC(我所理解的并不属于前后端通讯方式,属于p2p通讯)

文章更新中...