文档章节

快速实现H5聊天室和管理功能

泥水佬
 泥水佬
发布于 2018/10/13 17:34
字数 1456
阅读 163
收藏 0

对于FastHttpApi来说搭建一个基于Websocket的页面聊天室是一个非常简单的事件;毕竟基于FastHttpApi编写的接口默认就提供了WebSocket支持,因此在做基于Websocket通讯应用的时候和传统ajax数据交互应用没有多大的差别;以下讲解如何实现一个聊天室和管理功能。

功能描述

  1. 用户功能,主要功能:登陆,创建房间,进行房间,发言和查询房间用户信息
  2. 管理功能,主要功能:查看所有用户的发言进出房间情况,删除房间,踢用户下线

功能原型图

用户功能实现

用户功能不多,登陆、创建房间、进入房间、发言和查询房间用户功能。在传统的网络服务中编写起来可能有点因难,但在组件的支持下和传统web api没有两样。可能有人员会有点疑惑,毕竟web服务的api是无法向其他用户主动发信息,但在FastHttpApi则是可以的。接下来我们看一下这几个功能的API代码。

用户登陆

        public bool Login(string userName, IHttpContext context)
        {
            context.Session.Name = userName;
            if (context.Session.Name == "admin")
                lock (mAdminList)
                    mAdminList.Add(context.Session);
            return true;
        }

登陆功能很简单提交昵称即可;由于是示例这里就不作太多安全性的处理,当用户名是admin就直接加入到管理员列表中了(在管理员列表的用户是可以接收其他用户的发言信息)。`

创建房间

        public object CreateRoom(string roomName, IHttpContext context)
        {
            roomName = roomName.ToLower();
            if (mRooms.Count > 200)
                return new ActionResult(503, "房间已经满,不能再创建");
            if (mRooms.ContainsKey(roomName))
                return new ActionResult(504, "房间已经存在");
            Room room = new Room();
            room.Name = roomName;
            room.Controller = this;
            mRooms[room.Name] = room;
            context.SendToWebSocket(new ActionResult(new Command { Type = "CreateRoom", Name = roomName }));
            return true;
        }

在这里对创建房间的数量进行了一个限制,创建成功后需要向所有用户广播一个创建房间信息。对于组件来说可以通过IHttpContext向当前服务中所有websocket连接发送数据;最后它还是要响应回当前请求的用户便建房间成功(代码中涉及的状态都是随意定义,和具体的HTTP状态并没有直接关系)。

进入和退出房间

        public object CheckInRoom(string roomName, IHttpContext context)
        {
            Room room;
            if (mRooms.TryGetValue(roomName, out room))
                room.CheckIn(context);
            else
                return new ActionResult(404, "房间不存在");
            return true;
        }
        public object CheckOutRoom(string roomName, IHttpContext context)
        {
            Room room;
            if (mRooms.TryGetValue(roomName, out room))
                room.CheckOut(context);
            else
                return new ActionResult(404, "房间不存在");
            return true;
        }

以上是进入和退出房间的代码,这个代码只是告诉当前用户进入房间的情况;我们还需要告诉当前房间的其他用户和管理员谁进或退出房间

            public void CheckIn(IHttpContext context)
            {
                if (!Sessions.Contains(context.Request))
                {
                    Command cmd = new Command();
                    cmd.Type = "CheckIn";
                    cmd.Room = Name;
                    cmd.Name = context.Session.Name;
                    context.Session["room"] = this.Name;
                    lock (this.Sessions)
                        Sessions.Add(context.Request);
                    SendMessage(cmd, context.Server);
                    Controller.SendToAdmin(cmd);
                }
            }
            public void CheckOut(IHttpContext context)
            {
                Command cmd = new Command();
                cmd.Type = "CheckOut";
                cmd.Room = Name;
                cmd.Name = context.Session.Name;
                lock (this.Sessions)
                    Sessions.Remove(context.Request);
                SendMessage(cmd, context.Server);
                Controller.SendToAdmin(cmd);
            }

通过以上代码,用户在进入或退出房间时都会把消息发给当前房间的所有用户和管理员。

用户发言

        public void SendMessage(string message, IHttpContext context)
        {
            string name;
            if (context.WebSocket)
            {
                name = context.Session.Name;
                Room room = GetRoom(context.Session);
                if (room != null)
                     Command cmd = room.Talk(name, message, context);
            }        
          }
            public Command Talk(string username, string message, IHttpContext context)
            {
                Command cmd = new Command();
                cmd.Type = "Talk";
                cmd.Message = message;
                cmd.Room = Name;
                cmd.Name = username;
                SendMessage(cmd, context.Server);
                Controller.SendToAdmin(cmd);
                return cmd;
            }

首先需要判断一下当的上下文是不是WebSocket,如果是就允许继续操作,从前用户Session获取房间信息,如果房间信息存在就把消息推送给房间的其他用户和管理员。这样用户的基础的服务功能已经完成。

管理端代码

管理端主要是监控和管理,所以功能相对并不多,主要就是删除房间和踢除在线用户。

        public void CloseSession([BodyParameter]List<int> sessions, IHttpContext context)
        {
            foreach (int i in sessions)
            {
                ISession session = context.Server.BaseServer.GetSession(i);
                if (session != null)
                    session.Dispose();
            }
        }
        public void CloseRoom(string roomName, IHttpContext context)
        {
            Room room;
            if (mRooms.Remove(roomName, out room))
            {
                room.Sessions.Clear();
                Command cmd = new Command();
                cmd.Type = "Delete";
                cmd.Room = roomName;
                context.SendToWebSocket(new ActionResult(cmd));
            }
        }

组件可以根据会话ID,获取会话对象后直接释放。对于关闭房间,在清除房间后广播一条删除房间消息给所有用户即可。

页面整合

当编写完成方法后,VS插件会自动生成对应的调用脚本,页面只需经引用脚即可调用.在页面处理上给合Vuejs还是可以很方便地把功能整合到一起的。

用户登陆方法

        async function login() {
            if (!$('#userName').val() || $('#userName').val().toLowerCase() == 'admin') {
                alert('登陆名称无效!');
                return;
            }
            var result = await $samples$chat$Login($('#userName').val());
            if (result.Code != 200) {
                alert(result.Error);
            }
            else {
                alert("登陆成功");
                lstTalkControl.Data = [];
                $('#loginBar').hide();
                $('#lstbody').empty();
                loginStatus = true;
                activeRoom = null;
                listRoom();
            }
        }

用户发送消息

        async function sendMessage() {
            if (!$('#talkMsg').val()) {
                alert('请输入发言的内容!');
                return;
            }
            var result = await $samples$chat$SendMessage($('#talkMsg').val());
            if (result.Code == 200) {
                $('#talkMsg').val('');
            }
            else {
                alert(result.Error);
            }
        }

定义接收广播消息

 api_receive(function (result) {
            switch (result.Data.Type) {
                case "Talk":
                    lstTalkControl.Data.push({ Type: 'Talk', Time: GetTime(), Name: result.Data.Name, Message: ' 说:' + result.Data.Message });
                    break;
                case "CheckIn":
                    lstTalkControl.Data.push({ Type: 'CheckIn', Time: GetTime(), Name: result.Data.Name, Message: ' 进入房间' });
                    listRoomUsers();
                    break;
                case "CheckOut":
                    lstTalkControl.Data.push({ Type: 'CheckOut', Time: GetTime(), Name: result.Data.Name, Message: ' 退出房间' });
                    listRoomUsers();
                    break;
            }
        });

踢除用户

            async function closeSession() {
                var items = getSelectItems();
                if (items.length > 0) {
                    if (confirm('是否要清除告诉的连接?')) {
                        var result = await $samples$chat$CloseSession(items);
                    }
                }
            }

这样聊天室用户和管理功能就集成完成,对于其他一些功能如用户连接断开广播消息,Uvejs数据绑定这些功能就不细说了可以通过sample代码来细看。

示例在线演示

© 著作权归作者所有

共有 人打赏支持
泥水佬

泥水佬

粉丝 72
博文 86
码字总数 56002
作品 7
广州
架构师
私信 提问
干货!融云直播聊天室sdk集成大全

直播聊天室 为方便开发者了解和接入融云直播聊天室,本文将介绍融云直播聊天室功能特点、主要构成及常见功能的解决方案。 产品介绍 融云直播聊天室,是专门为视频直播业务提供的一个产品。主...

程序猿怪
2017/07/25
526
1
鱼鱼聊天室--JoyChat

鱼鱼聊天室简介:利用Java语言开发基于TCP/IP协议和Socket编程技术的聊天室软件。软件具有友好的聊天界面,以及流畅的网 络通信效果,目前最新版本已具有一般聊天室的基本功能,包括:群聊,...

匿名
2009/07/06
7.3K
0
h5 聊天室怎么引入标准表情包,求个demo or建议

用h5开发的聊天室,功能都好了,就差这个表情了

moniDuoDuo
2017/03/28
222
1
DuckChat 1.0.9 发布,独立部署聊天系统 push 优化

DuckChat是一款安全的私有聊天软件,基于PHP环境,用于校园、企事业单位办公移动办公,互联网创业领域等。 试用Demo站点:http://gaga.akaxin.com/(在网页浏览器就可以访问) 1.0.9版本支持...

凉宫二萌
2018/10/11
942
0
臭皮匠零编程软件快速开发平台 2.0 正式发布

臭皮匠零编程软件快速开发平台 2.0 发布,更新内容: 新增Redis缓存管理模块,支持编辑、设置有效时间、删除等功能 新增可视化组件配置:多图片上传控件、百度编辑器、Label控件。 新增Activ...

huyubisheng
2018/03/15
4.5K
8

没有更多内容

加载失败,请刷新页面

加载更多

4.57 MariaDB慢查询日志 4.58 Tomcat_JDK部署 4.59 zrlog安装 4.60 Nginx代理Tomcat

4.57 MariaDB慢查询日志 为什么要配置慢查询日志? 目的是为了帮助我们分析MariaDB的瓶颈点。 如何配置? 1)进入MariaDB里面执行:show variables like 'slow%';show variables li...

Champin
今天
3
0
自动机器学习简述(AutoML)

为什么需要自动机器学习 对于机器学习的新用户而言,使用机器学习算法的一个主要的障碍就是算法的性能受许多的设计决策影响。随着深度学习的流行,工程师需要选择相应的神经网络架构,训练过...

naughty
今天
2
0
Android Studio Unable to resolve dependency for错误的排查

记录一次Android Studio Unable to resolve dependency for错误的排查 Android Studio 3.2.1 错误提示 Unable to resolve dependency for... 原因:在gradle中设置的代理并没有gradle 4.6的版......

Gemini-Lin
今天
0
0
java常用设计模式

设计模式; 一个程序员对设计模式的理解: “不懂”为什么要把很简单的东西搞得那么复杂。后来随着软件开发经验的增加才开始明白我所看到的“复杂”恰恰就是设计模式的精髓所在,我所理解的“...

呵呵哒灬
今天
5
0
Kafka入门

1、Kafka使用背景 在我们大量使用分布式数据库、分布式计算集群的时候,是否会遇到这样的一些问题: 我们想分析下用户行为(pageviews),以便我们设计出更好的广告位 我想对用户的搜索关键词...

watermelon11
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部