【前端插件】简单封装WebSocket

来源:互联网 发布:vue.js是谁开发的 编辑:程序博客网 时间:2024/06/05 19:54

修改记录

时间 描述 2017-07-06 编写 2017-08-06 重新编写 2017-11-27 简化初始化配置:默认自动获取”IP:Port/ProjectName”信息

正文

JS

/**WebSocket插件 * * @CreateBy:chngzhen@outlook.com * @CreateOn:2017-07-06 * @UpdateBy:chngzhen@outlook.com * @UpdateOn:2017-11-27 * * @param json * @returns {{init: init}} * @constructor */var IWebSocket = function(json) {    let options = {        uri:"#", // Socket绑定的URI        sockJsUri:"#",        projectName: window.location.pathname.split("/")[1], // 项目名称。默认以“/”为分隔符切割URI后取第2个字符串        host: window.location.host, // 项目IP和端口。默认取当前项目的主机IP和Port        onOpen:function(event) {            // 自定义WSC连接事件:服务端与前端连接成功后触发            console.log(event)        },        onMessage:function(event) {            // 自定义WSC消息接收事件:服务端向前端发送消息时触发            console.log(event)        },        onError:function(event) {            // 自定义WSC异常事件:WSC报错后触发            console.log(event)        },        onClose:function(event) {            // 自定义WSC关闭事件:WSC关闭后触发            console.log(event)        }    };    $.extend(true, options, json);    let websocket;    if ('WebSocket' in window) {        websocket = new WebSocket("ws://" + options.host + "/" +options.projectName + "/" + options.uri);    } else if ('MozWebSocket' in window) {        websocket = new MozWebSocket("ws://" + options.host + "/" +options.projectName + "/" + options.uri);    } else {        websocket = new SockJS("http://" + options.host + "/" +options.projectName + "/" + options.sockJsUri);    }    websocket.onopen = function(evnt) {        options.onOpen(evnt);    };    websocket.onmessage = function(evnt) {        options.onMessage(evnt);    };    websocket.onerror = function(evnt) {        options.onError(evnt);    };    websocket.onclose = function(evnt) {        options.onClose(evnt);    };    return websocket;}

使用

  本文章不展示后台程序。

var system = IWebSocket({    uri:"/wsc/count/readtimes?blogId=${blog.id}"    // 可以自定义四大事件    ,onOpen: function(event) {        console.log("阅读时长统计WebSocket开启!");        websockets.countReadTimes.timeout=setTimeout("plusReadTimes()", 60000);    }    ,onClose: function(event){        console.log("阅读时长统计WebSocket关闭!");        if ("undefined"!=typeof websockets.countReadTimes.timeout) clearTimeout(websockets.countReadTimes.timeout);    },onMessage: function(event) {        console.log(event.toString())    }});
原创粉丝点击