HTML5

日期:2021-01-20 类型:科技新闻 

关键词:怎么把小程序变成二维码,微信小程序怎么开通,微信小程序csdn,小程序开发,网络答题小程序

在传统式的网页页面完成闲聊室的方式是根据每隔1段時间恳求服务器获得有关闲聊信息内容来完成,但是html5带来的websocket作用更改这了这类方法.因为websocket在联接服务器后容许维持联接来开展数据信息互动,因而服务器能够积极地向顾客端推送相应的数据信息.针对html5的解决只必须在联接建立进行后在websocket的receive恶性事件中解决接受的数据信息便可.下面根据完成1个闲聊室来体验1下服务器能够积极地向顾客端发的作用.

作用

1个简易的闲聊室关键有下列几个作用:

1)申请注册

申请注册要解决几个事儿,各自是申请注册进行后获得当今服务器全部客户目录,服务把当今申请注册取得成功的客户推送给别的线上的客户.

2)发信息内容

服务器把当今接受的信息推送给线上的别的客户

3)撤出

服务器把断掉的客户通告别的客户

闲聊室进行的作用预览以下:

C#服务端编码

服务端编码只必须对于几作用界定几个方式便可,各自是申请注册,获得别的客户和推送信息内容.实际编码以下:

/// <summary>

    /// Copyright © henryfan 2012        

    ///Email:   henryfan    

    ///HomePage:    http://www.ikende.com       

    ///CreateTime:  2012/12/7 21:45:25

    /// </summary>

    class Handler

    {

        public long Register(string name)

        {

            

            TcpChannel channel = MethodContext.Current.Channel;

            Console.WriteLine("{0} register name:{1}", channel.EndPoint, name);

            channel.Name = name;

            JsonMessage msg = new JsonMessage();

            User user = new User();

            user.Name = name;

            user.ID = channel.ClientID;

            user.IP = channel.EndPoint.ToString();

            channel.Tag = user;

            msg.type = "register";

            msg.data = user;

            foreach (TcpChannel item in channel.Server.GetOnlines())

            {

                if (item != channel)

                    item.Send(msg);

            }

            return channel.ClientID;

        }

        public IList<User> List()

        {

            TcpChannel channel = MethodContext.Current.Channel;

            IList<User> result = new List<User>();

            foreach (TcpChannel item in channel.Server.GetOnlines())

            {

                if (item != channel)

                    result.Add((User)item.Tag);

            }

            return result;

        }

        public void Say(string Content)

        {

            TcpChannel channel = MethodContext.Current.Channel;

            JsonMessage msg = new JsonMessage();

            SayText st = new SayText();

            st.Name = channel.Name;

            st.ID = channel.ClientID;

            st.Date = DateTime.Now;

            st.Content = Content;

            st.IP = channel.EndPoint.ToString();

            msg.type = "say";

            msg.data = st;

            foreach (TcpChannel item in channel.Server.GetOnlines())

            {

                item.Send(msg);

            }
        }
    } 

只必须以上简易的编码就进行了闲聊室服务端作用,针对客户撤出能够根据联接释放出来恶性事件来做解决实际编码:

protected override void OnDisposed(object sender, ChannelDisposedEventArgs e)

        {

            base.OnDisposed(sender, e);

            Console.WriteLine("{0} disposed", e.Channel.EndPoint);

            JsonMessage msg = new JsonMessage();

            User user = new User();

            user.Name = e.Channel.Name;

            user.ID = e.Channel.ClientID;

            user.IP = e.Channel.EndPoint.ToString();

            msg.type = "unregister";

            msg.data = (User)e.Channel.Tag;

            foreach (TcpChannel item in this.Server.GetOnlines())

            {

                if (item != e.Channel)

                    item.Send(msg);

            }

        } 

这样闲聊定的服务端编码就早已进行了.

JavaScript编码

针对html5编码最先要做的1件事便是联接到服务器,有关javascript编码以下:

function connect() {

            channel = new TcpChannel();

            channel.Connected = function (evt) {

                callRegister.parameters.name = $('#nikename').val();

                channel.Send(callRegister, function (result) {

 

                    if (result.status == null || result.status == undefined) {

                        $('#dlgConnect').dialog('close');

                        registerid = result.data;

                        list();

                    }

                });

 

            };

            channel.Disposed = function (evt) {

                $('#dlgConnect').dialog('open');

            };

            channel.Error = function (evt) {

                alert(evt);

            };

            channel.Receive = function (result) {

                if (result.type == "register") {

                    var item = getUser(result.data);

                    $(item).appendTo($('#lstOnlines'));

                }

                else if (result.type == 'unregister') {

                    $('#user_' + result.data.ID).remove();

                }

                else if (result.type == 'say') {

                    addSayItem(result.data);

                }

                else {

                }

            }

            channel.Connect($('#host').val());

        } 

根据Receive回调函数池数来解决不一样信息的状况,假如是接受到别的客户的申请注册信息内容,则把客户信息内容加上到目录中;假如收到的别的客户的撤出信息内容则在客户目录种移走;立即收到信息加上到信息显示信息框中便可.有jquery的协助以上恶性事件都变得十分简易.

客户申请注册启用全过程:

var callRegister = { url: 'Handler.Register', parameters: { name: ''} };

        function register() {

            $('#frmRegister').form('submit', {

                onSubmit: function () {

                    var isValid = $(this).form('validate');

                    if (isValid) {

                        connect();

                    }

                    return false;

                }

            });

        } 

获得线上客户目录全过程:

var callList = { url: 'Handler.List', parameters: {} };

        function list() {

            channel.Send(callList, function (result) {

                $('#lstOnlines').html('');

                for (var i = 0; i < result.data.length; i++) {

                    var item = getUser(result.data[i]);

                    $(item).appendTo($('#lstOnlines'));

                }

            });

        } 

推送信息全过程:

var callSay = { url: 'Handler.Say', parameters: {Content:""} }

        function Say() {

            callSay.parameters.Content = mEditor.html();

            mEditor.html('');

            channel.Send(callSay);

            $('#content1')[0].focus();

        } 

编码免费下载:demo

总结

历经编码封裝后websocket的解决变得十分简易,假如你有兴趣爱好彻底能够在此编码上拓展出1个更智能的聊到室,如闲聊室排序,推送信息内容照片共享资源这些.

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:浅谈HTML5新增及移除的元素 返回下一篇:没有了