//参考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;
});简单的调用方式：
<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ThinkCMF WebSocket Demo</title>
<script src="__TMPL__/demo/public/assets/js/vue.js"></script>
<script src="__TMPL__/demo/public/assets/js/websocketClient.js"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="message in messages">
{
{message }}
</li>
</ol>
<input v-model="message">
<button v-on:click="sentMessage">发送</button>
</div>
<php>
$_request=request();
</php>
<script>
var client = null;
var app = new Vue({
el: '#app',
data: {
message: 'Hello ThinkCMF!',
messages: []
},
methods: {
sentMessage: function () {
client.emit('demo/ws/index', {
"event": 'demo/ws/index',
"url": 'demo/ws/index',
"arguments": { //客户端投递数据
"post": {'message': this.message},//post数据
"get": {'test_get': 'test'},//get数据
"cookie": [],//cookie数据
}
});
this.message = '';
}
}
});
client = WsClient({host: "{$_request->host(true)}", port: 9501, endpoint: ''});
client.connect();
client.on('demo/ws/index', function (data) {
console.log(data);
app.messages.push(data.message);
});
// client.emit('portal/ws/index', "data");
</script>
</body>
</html>