使用webSocket和e程序实现即时通讯功能

简单的功能，管理系统发送文本或者图片，安装e程序的电脑上就能接收到
效果：

发送

接收文本和图片

接受到了，这个e程序内嵌了一个h5网页用websocket连接。实现即时通讯，这个主要是给一个管理员用，然后可以单独发送或者批量发送消息或者公告，给各个教室的多媒体屏幕上面展示出来。

var webSocket = null;
        var mySwiper = null;

        $(function(){
            var sid = $("#class_mq_id").text();
            var sid_security = $("#class_mq_id_security").text();
            var socketAddr = socket_server_address +  sid + "?" + sid_security;

            if(sid.length === 0){
                $.alert({title : "提示信息", content: "账号读取错误！请确认是否配置正确账号"});
                return;
            }

            if(sid_security.length === 0){
                $.alert({title : "提示信息", content: "密码读取错误！请确认是否配置正确密码"});
                return;
            }

            initWebSocket(socketAddr);

            $("#closeConn").click(function(event){
                webSocket.close();
            });

            $("#reConn").click(function(event){
                console.log(webSocket.readyState);
                if(webSocket.readyState === 1){
                      webSocket.close();
                }
                initWebSocket(socketAddr);

            });

            $("#reset").click(function(event){
                $("#message").empty();
            });

        });

        function initWebSocket(target){

            if('WebSocket' in window) {
                webSocket = new WebSocket(target);
            } else if('MozWebSocket' in window) {
                webSocket = MozWebSocket(target);
            } else {
                $.alert({title : "提示信息", content: "当前浏览器不支持WebSocket"});
            }

            //连接发生错误的回调方法
            webSocket.onerror = function () {
               $("#conn_info").text("连接发生错误!");
               $("#conn_info").css('color','red');
            };

            //连接成功建立的回调方法
            webSocket.onopen = function () {
                $("#conn_info").text("连接成功!");
                $("#conn_info").css('color','green');
            }

            //接收到消息的回调方法
            webSocket.onmessage = function (event) {
                $("#message").empty();
                $("#pic").find('div[class="swiper-wrapper"]').empty();
                mySwiper = null;

                var rvData = $.parseJSON(event.data);
                console.log(rvData);
                setMessageInnerHTML(rvData);
            }

            //连接关闭的回调方法
            webSocket.onclose = function () {
                $("#conn_info").text("连接关闭!");
                $("#conn_info").css('color','orange');
            }
        }

		//将消息显示在网页上
		function setMessageInnerHTML(info) {
			//document.getElementById('message').innerHTML += innerHTML + '<br/>';
            if(info.action === "message"){
                var message = info.message
                if(message.type == 1){
                    $("#message").append(message.info);
                }else{
                    var picInfos = message.info;
                    $.each(picInfos, function(index, picInfo){
                        var pic = '<div class="swiper-slide"><img  width="100%" src="' + picInfo.src + ' " /></div>'
                        $("#pic").find('div[class="swiper-wrapper"]').append(pic);
                    });
                	mySwiper = new Swiper('.swiper-container', {
                        direction: 'horizontal',
                        loop: true,
                        autoplay:true,
                        speed:2000,
                        // 如果需要分页器
                        pagination: '.swiper-pagination',

                        // 如果需要前进后退按钮
                        // nextButton: '.swiper-button-next',
                        // prevButton: '.swiper-button-prev',

                        // 如果需要滚动条
                        scrollbar: '.swiper-scrollbar',

                        autoplayDisableOnInteraction : false,
                  })
                }
            }

		}

做的有点蠢，功能实现了，给大家一个dome或者一个思路就行。
希望能给你带来帮助。