www.gusucode.com > Aycms自媒体建站系统PHP版 v1.0.1源码程序 > Aycms_v1.0.1/public/themes/default/demo/public/assets/js/websocketClient.js
//参考https://github.com/MacArthurJustin/vue-remote 修改 /** *var client=WsClient({host:"127.0.0.1",port:9502}); *client.connect();//链接服务器 *client.on('/index/index/index',function(data){console.log(data)}).emit('/index/index/index',"data")//on每次绑定都不会销毁 *client.once('/index/index/index',function(data){console.log(data)}).emit('/index/index/index',"data")//once每次绑定,接收数据后就销毁当前接收方法 */ (function webpackUniversalModuleDefinition(root, factory) { if (typeof exports === 'object' && typeof module === 'object') module.exports = factory(); else if (typeof define === 'function' && define.amd) define([], factory); else if (typeof exports === 'object') exports["WsClient"] = factory(); else root["WsClient"] = factory(); })(this, function () { var WsClient = function (options) { var Client = null, Handlers = Object.create(null), socketPump = [], pumpInterval = null; options = options || {}; options.secure = options.secure || false; options.host = options.host || "localhost"; options.port = options.port || 8080; options.identifier = options.identifier || 'event'; options.endpoint = options.endpoint || ''; options.camelCase = options.camelCase || true; /** * Connect to Websocket Server */ function connect() { Client = new WebSocket(`${(options.secure ? 'wss://' : 'ws://')}${options.host}${options.port ? ':' + options.port : ''}/${options.endpoint}`, options.protocol); Client.onopen = openHandler; Client.onerror = errorHandler; Client.onmessage = messageHandler; Client.onclose = closeHandler } /** * Handle Server Connection Event * * @param {Event} open */ function openHandler(open) { console.log("Connected to Web Server"); console.log(open); if (options.openHandler) options.openHandler(open) } /** * Handle Server Errors * * @param {Event} error */ function errorHandler(error) { console.log("Error occured"); console.log(error); if (options.errorHandler) options.errorHandler(error) } /** * Handle Messages Returned from the Server * * @param {MessageEvent} message * @returns */ function messageHandler(message) { var Json = JSON.parse(message.data), identifier = options.camelCase ? Json[options.identifier].replace( /-([A-Za-z0-9])/gi, (s, group1) => group1.toUpperCase() ) : Json[options.identifier], Events = Handlers[identifier]; if (Events) { Events.forEach( (Event) => { //Event.callback.apply(Event.thisArg, [Json.data]) //Adapt to all respone format Event.callback.apply(Event.thisArg, [Json]) } ) } } /** * {EventListener} For When the Websocket Client Closes the Connection * * @param {CloseEvent} close */ function closeHandler(close) { if (options.closeHandler) options.closeHandler(close); if (pumpInterval) { window.clearInterval(pumpInterval); pumpInterval = null } Client = null } /** * Attaches Handlers to the Event Pump System * * @param {Boolean} server True/False whether the Server should process the trigger * @param {String} identifier Unique Name of the trigger * @param {Function} callback Function to be called when the trigger is tripped * @param {Object} [thisArg] Arguement to be passed to the handler as `this` */ function attachHandler(identifier, callback, thisArg) { identifier = options.camelCase ? identifier.replace( /-([A-Za-z0-9])/gi, (s, group1) => group1.toUpperCase() ) : identifier; !(Handlers[identifier] || (Handlers[identifier] = [])).push({ callback: callback, thisArg: thisArg }) } /** * Detaches Handlers from the Event Pump System * * @param {String} identifier Unique Name of the trigger * @param {Function} callback Function to be called when the trigger is tripped */ function detachHandler(identifier, callback) { if (arguments.length === 0) { Handlers = Object.create(null); return } var Handler = Handlers[identifier]; if (!Handler) return; if (arguments.length === 1) { Handlers[identifier] = null; return } for (var index = Handler.length - 1; index >= 0; index--) { if (Handler[index].callback === callback || Handler[index].callback.fn === callback) { Handler.splice(index, 1) } } } /** * Handles Event Triggers * * @param {String} identifier * @returns */ function emitUrlHandler(identifier) { var url = arguments[1] || '/'; var args = arguments[2] || []; if (arguments.length > 3) { args = arguments.length > 1 ? [].slice.apply(arguments, [1]) : [] } if (typeof args === "object") { args.identifier = identifier; socketPump.push(JSON.stringify(args)); return } socketPump.push( JSON.stringify({ "event": identifier, "url": url, 'arguments': args }) ) } function emitHandler(identifier) { console.log(arguments); var args = arguments[1] || []; if (arguments.length > 2) { args = arguments.length > 1 ? [].slice.apply(arguments, [1]) : [] } if (typeof args === "object") { args.identifier = identifier; socketPump.push(JSON.stringify(args)); return } socketPump.push( JSON.stringify({ "event": identifier, "url": identifier, 'arguments': args }) ) } /** * Sends Messages to the Websocket Server every 250 ms * * @returns */ function pumpHandler() { if (socketPump.length === 0) return; if (!Client) connect(); if (Client.readyState === WebSocket.OPEN) { socketPump.forEach( (item) => Client.send(item) ); socketPump.length = 0 } } if (!pumpInterval) window.setInterval(pumpHandler, 250); return { connect: connect, disconnect: function () { if (Client) { Client.close(); Client = null } }, attach: attachHandler, detach: detachHandler, emitUrl: emitUrlHandler, emit: emitHandler, on: function (identifier, callback) { this.attach(identifier, callback, this); return this }, once: function (identifier, callback) { const thisArg = this; function once() { this.detach(identifier, callback); callback.apply(thisArg, arguments) } once.fn = callback; this.attach(identifier, once, thisArg); return thisArg }, off: function (identifier, callback) { this.detach(identifier, callback, this); return this } } }; return WsClient; });