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 .