Legendary

李洋的学习笔记


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>

页面列表

ITEM_HTML