websocket
<h3>node-express框架使用<code>express-ws</code>:</h3>
<p>1、安装<code>express-ws</code>:<code>cnpm i express express-ws</code>
2、引入模块、创建服务:</p>
<pre><code>var express = require('express');
var expressWs = require('express-ws');
var app = express();
app.ws('/socketTest', function (ws, req){
ws.send('你连接成功了')
ws.on('message', function (msg) {
// 业务代码
})
})</code></pre>
<p><strong>模块化开发</strong>:</p>
<ul>
<li>ws.js</li>
</ul>
<pre><code>
var express = require('express');
var expressWs = require('express-ws');
var router = express.Router();
expressWs(router);
router
.ws('/user', function (ws, req){
ws.on('message', function (msg) {
// 业务代码
...
})
})
.get('/user', function(req, resp) {
})
.post('/user', function(req, resp) {
})
...
module.exports = router;</code></pre>
<ul>
<li>app.js</li>
</ul>
<pre><code>var express = require('express');
var expressWs = require('express-ws');
var wsRouter = require('ws');
var app = express();
expressWs(app);
app.use('/ws',wsRouter);</code></pre>
<ul>
<li>bin/www</li>
</ul>
<pre><code>//结合 http 模块使用:将 httpsServer 作为 express-ws 的第二个参数使用,使用于 http 和 https
//var httpsServer = https.createServer(credentials, app);
//httpsServer.listen(port);
var httpServer = http.createServer(app);
httpServer.listen(port);
var expressWss = require('express-ws')(app, httpsServer);</code></pre>
<p><a href="https://blog.csdn.net/qq_38209578/article/details/82666820">https://blog.csdn.net/qq_38209578/article/details/82666820</a></p>
<p><a href="https://blog.csdn.net/itas109/article/details/104033947">https://blog.csdn.net/itas109/article/details/104033947</a></p>
<h3>前端:</h3>
<p>1、 实现:</p>
<pre><code>var ws = new WebSocket(url);
ws.onclose = function () {
//连接关闭
};
ws.onerror = function () {
//连接报错
};
ws.onopen = function () {
//连接成功
};
ws.onmessage = function (event) {
//收到数据
}</code></pre>
<p>2、重连:</p>
<pre><code>var ws = new WebSocket(url);
ws.onclose = function () {
reconnect()
};
ws.onerror = function () {
reconnect()
};
function reconnect(url) {
setTimeout(function () { //没连接上会一直重连,设置延迟避免请求过多
var ws = new WebSocket(url);
ws.onclose = function () {
reconnect()
};
ws.onerror = function () {
reconnect()
};
}, 2000);
}</code></pre>
<p>3、实例化:</p>
<pre><code>var ws = new WebSocket(url);
ws.onclose = function () {
reconnect()
};
ws.onerror = function () {
reconnect()
};
// 重连
function reconnect(url) {
setTimeout(function () { //没连接上会一直重连,设置延迟避免请求过多
createWebSocket(url);
}, 2000);
}
// 实例websocket
function createWebSocket(url) {
try {
if ('WebSocket' in window) {
ws = new WebSocket(url);
} else if ('MozWebSocket' in window) {
ws = new MozWebSocket(url);
} else {
_alert("当前浏览器不支持websocket协议,建议使用现代浏览器",3000)
}
initEventHandle();
} catch (e) {
reconnect(url);
}
}
// 初始化事件函数
function initEventHandle() {
ws.onclose = function () {
reconnect(wsUrl);
};
ws.onerror = function (err) {
reconnect(wsUrl);
};
}</code></pre>
<p>4、同时触发多次重连的问题(加锁):</p>
<pre><code>function reconnect(url) {
if (reconnect.lockReconnect) return;
reconnect.lockReconnect = true;
setTimeout(function () { //没连接上会一直重连,设置延迟避免请求过多
createWebSocket(url);
reconnect.lockReconnect = false;
}, 2000);
}</code></pre>
<p>参考:<a href="https://www.jianshu.com/p/5297732db7f2">https://www.jianshu.com/p/5297732db7f2</a></p>