ASP.NET网站聊天室的设计与实现(第3节)
大家都玩过网站聊天室吧，那知道它是怎么实现的吗？
今天我们就来设计一个网站聊天室，用户输入用户名登陆聊天室，采用框架结构实现。
学习内容：
第一步，聊天室首页与简单计数器设计
1、打开VS2008。在“解决方案‘101'下新建网站，命名为Chatroom.默认首页文件为Default.aspx。
2、为Default.aspx添加窗体控件，切换到“设计”视图，从左侧工具箱标准组中拖出2个Lable控件，1个Textbox控件，一个Button控件，最后给输入昵称的Textbox文本添加必填验证。
在“设计”视图中双击Btn1按钮，在Default.aspx.cs中编写如下事件代码：
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Application["user_online"] == null)
{
Application["user_online"] = 0;
}
Application["user_online"] = (int)Application["user_online"] + 1;
Label3.Text = "(现在共有" + Application["user_online"].ToString() + "人在线!)";
}
protected void Button1_Click(object sender, EventArgs e)
{
if (Page.IsPostBack)
{
Session["User_name"]=this.Txt1.Text;
Response.Redirect("chat.aspx");
}
}
}
第二步，构建登录字符串与发言字符串
1、创建Chat.aspx页面文件，使用如下HTML语言可以编写分框架页面程序，把一个窗口分成两半。左半窗口用来存放输入发言内容的页面文件Inputwin.aspx,右半窗口用来存放显示聊天内容的页面文件Showwin.aspx。
2、构建登录消息字符串。在Chat.aspx.cs的Page_Load事件中编写代码如下：
protected void Page_Load(object sender, EventArgs e)
{
string user_name = (string)Session["user_name"];
string sayStr = "来自" + (string)Request.ServerVariables["REMOTE_ADDR"] + "的";
sayStr = sayStr + "<b><font color=red>" + user_name + "</font></b>";
sayStr = sayStr + "于" + DateTime.Now + "大驾光临";
Application.Lock();
Application["show"] = sayStr + "<br>" + Application["show"];I=I+1
Application.UnLock();
}
3、构建发言内容字符串。创建输入发言内容的页面文件Inputwin.aspx。为页面Inputwin.aspx添加控件，这里使用两个DropDownList下拉列表框控件，分别用来选择发言人的性别和心情，一个单行Textbox控件(对谁说)；一个多行Textbox控件(发言内容)；一个Button按钮(发言按钮)，最后添加验证控件。
在“设计”视图中双击Btn1(发言)按钮，在Inputwin.aspx.cs文件的Btn_click事件中编写代码如下：
protected void Button1_Click(object sender, EventArgs e)
{
if (Page.IsPostBack == true) //页面数据回传
{
String ssex, emotion, who;
ssex = DropDownList1.SelectedItem.Value; //获取性别
emotion = DropDownList2.SelectedItem.Text + "的"; //获取发言时表情
who = "对" + "<b>" + TextBox2.Text + "</b>"; //获取对谁说
//构建发言字符串:
String sayStr = "<font size='3' color='00ff00'><b>" + (string)Session["user_name"];
sayStr = sayStr + ssex + "</b></font>在" + DateTime.Now + emotion + who + " 说：";
sayStr = sayStr + TextBox3.Text;
Application.Lock();
Application["show"] = sayStr + "<br>" + (string)Application["show"];
Application.UnLock();
TextBox3.Text = "";// 将发言框清空
}
}
4、创建显示发言字符串和发言内容的页面文件(Showwin.aspx),实现代码如下：
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> <meta http-equiv="refresh" content="4"/> </head> <body> <form id="form1" runat="server"> <div> </div> </form> </body> </html>
在Showwin.aspx.cs的Page_Load事件中编写代码如下：
public partial class showwin : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.Write((string)Application["show"]);
}
}
5、为离开聊天室页面的Exit.aspx.cs文件编写代码如下：
protected void Page_Load(object sender, EventArgs e)
{
string sayStr = "<b>" + (string)Session["user_name"] + "</b>";
sayStr = sayStr + "于" + DateTime.Now + "离开聊天室了";
sayStr = "<font color='green'>" + sayStr + "</font>";
Application.Lock();
Application["show"] = sayStr + "<br>" + (string)Application["show"];
Application["user_online"] = (int)Application["user_online"] - 1;
Application.UnLock();
Response.Redirect("chatroom.aspx");
}
6、运行聊天室首页Default.aspx。
运行效果图
总结
设计网站聊天室，听起来就好像是已经进入到了网站制作这个环节，看到自己设计的一个功能很简单的聊天室，有一点点的成就感，虽然这只是万里长城的第一步。通过这次学习理解到了Session与Application的各自作用，学会了如何使页面分成两个窗口，如何找到正确的事件进行编写，总体来说对网页设计有了一些感觉，希望大家也能喜欢，试着设计一个属于自己的网站聊天室吧
相关推荐
-
Asp.net使用SignalR实现聊天室的功能
一.引言 在前一篇文章<Asp.net使用SignalR实现酷炫端对端聊天功能>中,我向大家介绍了如何实现实现端对端聊天的功能的,在这一篇文章中将像大家如何使用SignalR实现群聊这样的功能. 二.实现思路 要想实现群聊的功能,首先我们需要创建一个房间,然后每个在线用户可以加入这个房间里面进行群聊,我们可以为房间设置一个唯一的名字来作为标识.那SignalR类库里面是否有这样现有的方法呢?答案是肯定的. // IGroupManager接口提供如下方法 // 作用:将连接ID加入某个组 //
-
值得分享的php+ajax实时聊天室
非常经典的一款php+ajax实时聊天室,其中使用PHP文件保存聊天记录,按天划分,PHP实现聊天的功能只有一个文件,整合了PHP与AJAX技术,也就是说只要运行这一个文件就可以启动PHP的聊天室了,关于代码上面也是非常的简单,但是实现了聊天室一般的功能,聊天时的昵称,更改昵称的颜色,聊天字号大小,字体,加粗,窗体的变大变小等等,如果你想搞个聊天室来玩玩,这个源码完全可以满足普通的需求. 具体的效果看如下图: 关键代码: <?php header('content-type:text/html;
-
Redis实现多人多聊天室功能
本文为大家分享了Redis支持多人多聊天室功能的设计代码,供大家参考,具体内容如下 设计原理 左边的一个数据域,代表两个聊天室,聊天室id分别是827,729 在聊天室827里,有2个人,分别是jason22,jeff24他们分别已经阅读过聊天室内的id为5和6的消息 右边的一个数据域,代表了用户在不同的聊天室,jason22参与了827与729聊天室,在这两个聊天室里,他分别阅读到了id为5和id为10的消息 另外827聊天室内id为5的消息与729聊天室内id为5的消息不一样. 同时还有三个
-
Asp.net使用SignalR实现酷炫端对端聊天功能
一.引言 在前一篇文章已经详细介绍了SignalR了,并且简单介绍它在Asp.net MVC 和WPF中的应用.在上篇博文介绍的都是群发消息的实现,然而,对于SignalR是为了实时聊天而生的,自然少了不像QQ一样的端对端的聊天了.本篇博文将介绍如何使用SignalR来实现类似QQ聊天的功能. 二.使用SignalR实现端对端聊天的思路 在介绍具体实现之前,我先来介绍了使用SignalR实现端对端聊天的思路.相信大家在前篇文章已经看到过Clients.All.sendMessage(name,
-
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
1.什么是WebSocket? WebSocket 是一种自然的全双工.双向.单套接字连接.使用WebSocket,你的HTTP 请求变成打开WebSocket 连接(WebSocket 或者WebSocket over TLS(TransportLayer Security,传输层安全性,原称"SSL"))的单一请求,并且重用从客户端到服务器以及服务器到客户端的同一连接.WebSocket 减少了延迟,因为一旦建立起WebSocket 连接,服务器可以在消息可用时发送它们.例如,和轮
-
javascript和jQuery实现网页实时聊天的ajax长轮询
介绍 大家都知道,HTTP协议是一个属于应用层的面向对象的协议,HTTP 协议一共有五大特点: 1.支持客户/服务器模式; 2.简单快速; 3.灵活; 4.无连接; 5.无状态. 所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的长时间联系,从而源源不段地获取信息. 一直以来的方式无非有这么几种: 1.长连接,即服务器端不断开联系,PHP服务器端用ob系列函数来不停的读取输出,但是相当耗费服务器资源. 2.Flash socket,
-
使用Meteor配合Node.js编写实时聊天应用的范例
我经常见到被拿来与Derby.js做比较的框架是Meteor.js. 与Derby相似的是,它也能在多个客户端下实时更新views, 尽管做法上可能跟Derby有点不同. Derby可以较容易的使用多种数据库, 而Meteor则只亲近于MongoDB. 事实上, 通过如Mongoose客户端接入数据库的API与你在服务端所期望的已经非常接近了. 虽然现在meteor是个有一些缺点和争议的框架, 但Meteor看起来是非常有趣的选择用来建立有实时需求的应用. 个人还是喜欢Derby基于传统回调的编
-
Asp.net SignalR创建实时聊天应用程序
一.概述 使用 ASP.NET 那么 SignalR 2 创建一个实时聊天应用程序.将 SignalR 添加 MVC 5 应用程序中,并创建聊天视图发送并显示消息. 在Demo中,将学习SignalR 开发任务包括 ︰ 向 MVC 5 应用程序添加那么 SignalR 图书馆. 创建集线器和浩然启动类,以将内容推送到客户端. 使用 web 页中的那么 SignalR jQuery 库发送邮件并显示更新从集线器. 下面的屏幕快照显示在浏览器中运行的已完成的聊天应用程序. 二.实现 创建一个 ASP
-
asp.net mvc signalr简单聊天室制作过程分析
signalr的神奇.实用很早就知道,但一直都没有亲自去试用,仅停留在文章,看了几篇简单的介绍文字,感觉还是很简单易用的. 由于最后有个项目需要使用到它,所以就决定写个小程序测试一下,实践出真知:别人写的文章,由于环境(版本等)不同,还是或多或少存在一些出入的. 环境:vs2013 / asp.net mvc 5 / signalr 2.2.1 / jquery 1.10.2 先上两个效果图: 系统会自动给加入聊天室的人员分配一个ID,是该人员的唯一标识(绿色为当前用户说的话,橙色为当前用户之外
-
ASP.NET 使用application与session对象写的简单聊天室程序
ASP.Net中有两个重要的对象,一个是application对象,一个是session对象. Application:记录应用程序参数的对象,该对象用于共享应用程序级信息. Session:记录浏览器端的变量对象,用来存储跨网页程序程序的变量或者对象. 说实话,写了快一年的asp.net,application对象还真没怎么用过.看了看书,根据这两个对象的特性写了一个简单的聊天室程序.真的是非常的简陋. 我的思路是,有两个页面Default页和ChatRoom页,页面布局如图: Default