20190223 js 浏览器知识

最新推荐文章于 2024-08-02 22:18:58 发布

时光之里

最新推荐文章于 2024-08-02 22:18:58 发布

阅读量2.2k

点赞数 3

分类专栏：日常记录文章标签：长连接 cookie websocket

本文链接：https://blog.csdn.net/m_review/article/details/87896555

版权

日常记录专栏收录该内容

17 篇文章 0 订阅

订阅专栏

websocket案例的github地址： https://github.com/YueJingGe/websocket

长连接

发送请求只有第一次进行三次握手

cookie

过期时间：不设置则为会话时间

状态码

304

304 的标准解释是：Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供 If-Modified- Since 头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。
```
this.$http.get('./api/ratings?t='+ (new Date()).getTime().toString())
```
502

url中包含中文导致请求失败问题：

原因：请求连接是不支持中文的。标准的URL都是用UTF-8来编码。

解决：
- 将中文使用utf8编码，在服务器进行解码操作
  
  https://www.npmjs.com/package/utf8
```
// npm install utf8
// utf8.encode('\xA9');
// utf8.decode('\xC2\xA9');
```
- 使用encodeURI() 函数将整个URI编码
  
  http://www.w3school.com.cn/jsref/jsref_encodeuri.asp
```
encodeURI(URIstring)
```

在所有浏览器中控制网页缓存

更多解法： https://stackoverflow.com/questions/49547/how-to-control-web-page-caching-across-all-browsers

express项目或者node.js中

app.use(function(req, res, next) {
  res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
  res.setHeader('Pragma', 'no-cache');
  res.setHeader('Expires', '0');
  next();
});

使用HTML

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

各种缓存知识介绍： http://www.360doc.com/content/17/0619/10/16915_664371217.shtml

websocket

例子一：利用别人写好的服务

<!DOCTYPE html>
<html>
<body>
  <input id="text" />
  <button id="btn">发送</button>
  <div id="show"></div>

  <script>
    let websocket = new WebSocket('ws://echo.websocket.org/');

    websocket.onopen = function() {
      console.log('open');
      document.getElementById('show').innerHTML = 'connect';
    }
    websocket.onclose = function() {
      console.log('close');
    }
    websocket.onmessage = function(e) {
      console.log(e.data);
      document.getElementById('show').innerHTML = e.data;
    }
    document.getElementById('btn').onclick = function() {
      let val = document.getElementById('text').value;
      websocket.send(val);
    }
  </script>
</body>

</html>

例子二：自己写node websocket服务

npm i nodejs-websocket

./wsServer.html

var ws = require('nodejs-websocket');
var port = 3000;

var server = ws.createServer(function(conn){
  console.log('new connect');
  conn.on('text', function(str) {
    console.log('接收数据', str);
    conn.sendText(str + '!!!');
  });
  conn.on('close', function(code, reason) {
    console.log('close connect');
  });
  conn.on('error', function(err) {
    console.log('抛出异常', err);
  });
}).listen(port);

console.log('websocket server listening on port' + port);

启动服务：node wsServer.js

./ndex.html

<!DOCTYPE html>
<html>
<body>
  <input id="text" />
  <button id="btn">发送</button>
  <div id="show"></div>

  <script>
    let websocket = new WebSocket('ws://localhost:3000/');

    websocket.onopen = function() {
      console.log('open');
      document.getElementById('show').innerHTML = 'connect';
    }
    websocket.onclose = function() {
      console.log('close');
    }
    websocket.onmessage = function(e) {
      console.log(e.data);
      document.getElementById('show').innerHTML = e.data;
    }
    document.getElementById('btn').onclick = function() {
      let val = document.getElementById('text').value;
      websocket.send(val);
    }
  </script>
</body>

</html>

例子三：简单的聊天功能

./wsServer.js

var ws = require('nodejs-websocket');
var port = 3000;

var clientCount = 0;

var server = ws.createServer(function(conn){
  console.log('new connect');
  clientCount++;
  conn.nickName = 'user' + clientCount;
  var mes = {};
  mes.type = 'enter';
  mes.data = conn.nickName + ' common in';
  brodeCast(JSON.stringify(mes));
  conn.on('text', function(str) {
    console.log('接收数据', str);
    var mes = {};
    mes.type = 'message';
    mes.data = conn.nickName + ' says: ' + str;
    brodeCast(JSON.stringify(mes));
  });
  conn.on('close', function(code, reason) {
    console.log('close connect');
    var mes = {};
    mes.type = 'left';
    mes.data = conn.nickName + ' says: ' + ' common left';
    brodeCast(JSON.stringify(mes));
  });
  conn.on('error', function(err) {
    console.log('抛出异常', err);
  });
}).listen(port);

function brodeCast(str) {
  server.connections.forEach(function(connection){
    connection.sendText(str)
  })
};

console.log('websocket server listening on port' + port);

./index.html

<!DOCTYPE html>
<html>
<body>
  <input id="text" />
  <button id="btn">发送</button>

  <script>
    let websocket = new WebSocket('ws://localhost:3000/');

    function showMessage(data, type) {
      let div = document.createElement('div');
      div.innerHTML = data;
      if(type === 'enter') {
        div.style.color = 'blue';
      }else if(type === 'left') {
        div.style.color = 'red';
      }
      document.body.appendChild(div);
    }

    websocket.onopen = function() {
      console.log('open');
      document.getElementById('btn').onclick = function() {
        let val = document.getElementById('text').value;
        websocket.send(val);
      }
    }
    websocket.onclose = function() {
      console.log('close');
    }
    websocket.onmessage = function(e) {
      console.log(e.data);
      var mes = JSON.parse(e.data);
      showMessage(mes.data, mes.type);
    }
    
  </script>
</body>

</html>

命令

cp ../demo1/index.html .

时光之里

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
5
评论
20190223 js 浏览器知识

长连接发送请求只有第一次进行三次握手cookie过期时间：不设置则为会话时间websocket例子一：利用别人写好的服务&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;body&amp;gt; &amp;lt;input id=&quot;text&quot; /&amp;gt; &amp;lt;button id=&amp
复制链接

扫一扫

专栏目录