HTML5-WebSocket实现聊天室示例


Posted in HTML / CSS onDecember 15, 2016

在传统的网页实现聊天室的方法是通过每隔一段时间请求服务器获取相关聊天信息来实现,然而html5带来的websocket功能改变这了这种方式.由于websocket在连接服务器后允许保持连接来进行数据交互,因此服务器可以主动地向客户端发送相应的数据.对于html5的处理只需要在连接创建完成后在websocket的receive事件中处理接收的数据即可.下面通过实现一个聊天室来体验一下服务器可以主动地向客户端发的功能.

功能

一个简单的聊天室主要有以下几个功能:

1)注册

注册要处理几个事情,分别是注册完成后获取当前服务器所有用户列表,服务把当前注册成功的用户发送给其他在线的用户.

2)发信息

服务器把当前接收的消息发送给在线的其他用户

3)退出

服务器把断开的用户通知其他用户

聊天室完成的功能预览如下:

HTML5-WebSocket实现聊天室示例

C#服务端代码

服务端的代码只需要针对几功能定义几个方法即可,分别是注册,获取其他用户和发送信息.具体代码如下:

/// <summary>

    /// Copyright © henryfan 2012        

    ///Email:   henryfan@msn.com    

    ///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代码首先要做的一件事就是连接到服务器,相关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的处理变得非常简单,如果你有兴趣完全可以在此代码上扩展出一个更多功能的聊到室,如聊天室分组,发送信息图片共享等等.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
使用css3实现超炫的loading加载动画效果
May 07 HTML / CSS
CSS的background属性及CSS3的背景图片设置总结
Jun 13 HTML / CSS
CSS3模拟IOS滑动开关效果
Sep 28 HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
Jan 09 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 HTML / CSS
HTML5的表单(绝对特别强大的功能)使用示例
Jun 20 HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
Aug 23 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 #HTML / CSS
详解HTML5表单新增属性
Dec 21 #HTML / CSS
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
Dec 22 #HTML / CSS
详解HTML5 LocalStorage 本地存储
Dec 23 #HTML / CSS
HTML5应用之文件上传
Dec 30 #HTML / CSS
详解HTML5中的标签
Jun 19 #HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
Apr 10 #HTML / CSS
You might like
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
session 加入redis的实现代码
2016/07/15 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
laravel 数据验证规则详解
2019/10/23 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
jquery.validate使用攻略 第二部
2010/07/01 Javascript
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
对Python _取log的几种方式小结
2019/07/25 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
电钳工人个人求职信
2014/05/10 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS