关于websocket和ajax无刷新

发布时间：2020-12-16 03:03:07 所属栏目：百科来源：网络整理

导读：HTTP无状态： ? ? A jax只能实现用户和服务器单方面响应（单工机制）. ? 如果设置为长轮询（ajax设置多少秒进行一次请求，时间间隙可能会有延迟，且浪费资源） ? 如果设置为长连接（客户端请求一次，服务器保持持续链接，一旦有了新数据，就全部发送

HTTP无状态：?

Ajax只能实现用户和服务器单方面响应（单工机制）.?

如果设置为长轮询（ajax设置多少秒进行一次请求，时间间隙可能会有延迟，且浪费资源）?

如果设置为长连接（客户端请求一次，服务器保持持续链接，一旦有了新数据，就全部发送客户端）?

webScoket：?

webSocket是响应客户端和服务器端双响应（全双工机制）.?

支持的浏览器有：Chrome4+、Firefox4+、IE10+（“+”包含本身）?

支持的服务器有：Node0、Apache7.0.2、Nginx1.3?

1. 采用webscoket - 节省资源

 1  var websocket = null;  2         //判断当前浏览器是否支持WebSocket
 3         if (‘WebSocket‘ in window || window in WebSocket) {  4             //建立连接，这里的/websocket ，是ManagerServlet中开头注解中的那个值
 5             websocket = new WebSocket("ws://localhost:8080");  6  }  7         else {  8             alert(‘当前浏览器 Not support websocket‘)  9  } 10         //连接发生错误的回调方法
11         websocket.onerror = function () { 12             setMessageInnerHTML("WebSocket连接发生错误"); 13  }; 14         //连接成功建立的回调方法
15         websocket.onopen = function () { 16             setMessageInnerHTML("WebSocket连接成功"); 17  } 18         //接收到消息的回调方法
19         websocket.onmessage = function (event) { 20             setMessageInnerHTML(event.data); 21             if (event.data == "1") { 22  location.reload(); 23  } 24  } 25         //连接关闭的回调方法
26         websocket.onclose = function () { 27             setMessageInnerHTML("WebSocket连接关闭"); 28  } 29         //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
30         window.onbeforeunload = function () { 31  closeWebSocket(); 32  } 33         //将消息显示在网页上
34  function setMessageInnerHTML(innerHTML) { 35             document.getElementById(‘message‘).innerHTML += innerHTML + ‘<br/>‘; 36  } 37         //关闭WebSocket连接
38  function closeWebSocket() { 39  websocket.close(); 40         }

2.ajax(长轮询) - 浪费服务器和客户端资源

 1 <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
 2 <script>
 3     //每500ms使用ajax取一次数据
 4     setTimeout(function () {  5         var fun = arguments.callee;  6         // 重复调用 - 500ms.
 7         setTimeout(fun,500);  8 
 9         // 这里写ajax代码.
10         console.log(fun,‘ajax执行了!‘); 11 
12     },500); 13 </script>

3.服务器长连接（具体由后台操作服务器执行.）

采用nodejs做的一个示例：

怎么使用（同一项目文件目录下）：

npm i socket.io

index.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9 </head>
10 
11 <body>
12     <input type="text" id="text" width="500">
13     <input type="button" value="发送消息" id="btn">
14 
15     <script type="text/javascript" src="/socket.io/socket.io.js"></script>
16     <script type="text/javascript">
17         var socket = io(); 18  document.getElementById(‘btn‘).onclick = function () { 19  socket.emit(‘program‘,document.getElementById(‘text‘).value); 20  } 21  socket.on(‘reply‘,function (msg) { 22  console.log(msg); 23  }); 24     </script>
25 </body>
26 
27 </html>

node-server.js

 1 const http = require(‘http‘);  2 const fs = require(‘fs‘);  3 
 4 const server = http.createServer(function (req,res) {  5     if (req.url == ‘/‘) {  6         fs.readFile(‘./index.html‘,function (err,data) {  7  res.end(data);  8  });  9  } 10 }); 11 
12 const io = require(‘socket.io‘)(server); 13 let number = 1; 14 io.on(‘connection‘,function (socket) { 15     console.log(number++ + ‘个客户已连接...‘); 16     socket.on(‘program‘,function (msg) { 17         console.log(‘接收的信息:‘ + msg); 18         socket.emit(‘reply‘,msg); 19  }) 20 }) 21 
22 server.listen(8080,‘127.0.0.1‘);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!