正文

C#制作简单的多人在线即时交流聊天室

︶ㄣ速达网 メ
米米素材网V管理员 / 阅读
0708

这篇文章主要介绍了C#制作简单的多人在线即时交流聊天室的相关资料,需要的朋友可以参考下

实现网页版的在线聊天室的方法有很多，在没有来到html5之前，常见的有：定时轮询、长连接+长轮询、基于第三方插件（如flash的socket），而如果是html5，则比较简单，可以直接使用websocket，当然html5目前在pc端并没有被所有浏览器支持，所以我的这个聊天室仍是基于长连接+长轮询+原生的js及ajax实现的多人在线即时交流聊天室，这个聊天室其实是我上周周末完成的，功能简单，可能有些不足，但可以满足在线即时聊天需求，分享也是给大家提供一个思路，大家可以基于此来实现更好的在线即时聊天工具。

聊天室功能简介：

1。支持多人进入同一个聊天室聊天；

2。进入即离线均会自动生成通知信息显示在聊天室中，这样聊天的人们就知道谁进来了谁离开了；

3。实时显示在线人员表列；

4。无需数据库支持，全部存在内存中，当然有条件的可以采用分布式缓存或加一个数据库来存，这里演示就是用内存来存了。

下面就开始分享我的代码，由于采用原生的js及ajax，所以简单易懂，代码分别web前端及服务端（有点废话了）

web前端源代码如下：(chatpage.html)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
    html, body {
      margin: 0px;
      padding: 0px;
      width: 100%;
      height: 100%;
      background-color: #f8f7f7;
      font-family: arial,sans-serif;
    }
 
    #layouttable {
      margin:0px;
      padding:0px;
      width:100%;
      height:100%;
      border:2px solid green;
      border-collapse:collapse;
      min-width:800px;
    }
 
      #layouttable td {
        border: 1px solid green;
      }
 
    .h100p {
      height:100%;
    }
 
    .midtr{height:auto;}
      .midtr tr td {
        height: 100%;
      }
 
    #chatmsgbox, #chatonlinebox {
      background-color:white;
      overflow-x: hidden;
      overflow-y: auto;
      overflow-wrap: break-word;
      height: 100%;
    }
 
    #chatonlinebox {
      background-color:#f5d0a8;
    }
 
    .rc, .sd {
      overflow:hidden;
    }
 
     .rc p {
      float: left;
      color: green;
    }
      .sd p {
        float: right;
        color: orange;
      }
  </style>
 
</head>
<body>
  <table id="layouttable">
    <colgroup>
      <col style="width:auto" />
      <col style="width: 200px;" />
    </colgroup>
    <tr style="height:30px; background-color:lightblue;color:yellow;">
      <td>
        欢迎进入梦在旅途的网页即时在线大众聊天室 - www.zuowenjun.cn：
      </td>
      <td>
        当前在线人员
      </td>
    </tr>
    <tr style="height:auto;" id="midtr">
      <td>
        <div id="chatmsgbox">
        </div>
      </td>
      <td>
        <div id="chatonlinebox">
          <ul id="chatnames"></ul>
        </div>
      </td>
    </tr>
    <tr style="height:50px;">
      <td colspan="2">
        <label for="name">聊天妮称：</label>
        <input type="text" id="name" style="width:80px;" />
        <input type="button" id="btnsavename" value="确认进入" />
        <label for="msg">输入内容：</label>
        <input type="text" id="msg" style="width:400px;" />
        <input type="button" id="btnsend" value="发送消息" disabled="disabled" />
      </td>
    </tr>
  </table>
  <script type="text/javascript">
    var chatname = null;
    var ochatmsgbox, omsg, ochatnames;
    var ajaxforsend, ajaxforrecv;
 
    //页面加载初始化
    window.onload = function () {
      document.getelementbyid("btnsavename").onclick = function () {
        this.disabled = true;
        var oname = document.getelementbyid("name");
        oname.readonly = true;
        document.getelementbyid("btnsend").disabled = false;
        //receivemsg();
        setchatstatus(oname.value,"on");
      }
 
      document.getelementbyid("btnsend").onclick = function () {
        sendmsg(omsg.value);
      };
 
      //init
      ochatmsgbox = document.getelementbyid("chatmsgbox");
      omsg = document.getelementbyid("msg");
      ochatnames = document.getelementbyid("chatnames");
      ajaxforsend = getajaxobject();
      ajaxforrecv = getajaxobject();
    }
 
    //离开时提醒
    window.onbeforeunload = function () {
      event.returnvalue = "您确定要退出聊天室吗？";
    }
 
    //关闭时离线
    window.onunload = function () {
      setchatstatus(chatname, "off");
    }
 
    //设置聊天状态：在线 or 离线
    function setchatstatus(name, status) {
      callajax(getajaxobject(), "action=" + status + "&name=" + name, function (rs) {
        if (!rs.success) {
          alert(rs.info);
          return;
        }
        if (status == "on") {
          chatname = document.getelementbyid("name").value;
          settimeout("receivemsg()",500);
        }
        loadonlinechatnames();
      });
    }
 
    //加载在线人员名称列表
    function loadonlinechatnames(){
      callajax(getajaxobject(), "action=onlines", function (rs) {
        var lis = "";
        for(var i=0;i<rs.length;i++)
        {
          lis += "<li>"+ rs[i] +"</li>";
        }
        ochatnames.innerhtml = lis;
      });
    }
 
    //接收消息列表
    function receivemsg() {
      callajax(ajaxforrecv, "action=receive&name=" + chatname, function (rs) {
        if (rs.success) {
          showchatmsgs(rs.msgs, "rc");
        }
        settimeout("receivemsg()", 500);
      });
    }
    //发送消息
    function sendmsg(msg) {
      callajax(ajaxforsend, "action=send&name=" + chatname + "&msg=" + escape(msg), function (rs) {
        if (rs.success) {
          showchatmsgs(rs.msgs, "sd");
          omsg.value = null;
          //alert("发送成功！");
        }
      });
    }
 
    //显示消息
    function showchatmsgs(msgs, cssclass) {
      var loadonline = false;
      for (var i = 0; i < msgs.length; i++) {
        var msg = msgs[i];
        ochatmsgbox.innerhtml += "<div class='" + cssclass + "'><p>[" + msg.name + "] - " + msg.sendtime + " 说:<br/>" + msg.content + "</p></div>";
        if (msg.type == "on" || msg.type == "off")
        {
          loadonline = true;
        }
      }
      if (loadonline)
      {
        loadonlinechatnames();
      }
    }
 
    //调用ajax
    function callajax(ajax, param, callback) {
 
      ajax.open("post", "chathandler.ashx", true);
      ajax.setrequestheader("content-type", "application/x-www-form-urlencoded");
      ajax.onreadystatechange = function () {
        if (ajax.readystate == 4 && ajax.status == 200) {
          var json = eval("(" + ajax.responsetext + ")");
          callback(json);
        }
      };
      ajax.send(param);
    }
 
    //获取ajax对象（xmlhttprequest）
    function getajaxobject() {
      var xmlhttp;
      if (window.xmlhttprequest) {// code for ie7+, firefox, chrome, opera, safari
        xmlhttp = new xmlhttprequest();
      }
      else {// code for ie6, ie5
        xmlhttp = new activexobject("microsoft.xmlhttp");
      }
      return xmlhttp;
    }
 
  </script>
</body>
</html>

代码很简单，并都有注释，在此就不作说明了，如果有疑问欢迎在下方评论。

服务端（chathandler.ashx）　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<%@ webhandler language="c#" class="chathandler" %>
 
using system;
using system.web;
using system.collections;
using system.collections.generic;
using system.linq;
using system.web.script.serialization;
using system.threading;
using system.collections.concurrent;
 
public class chathandler : ihttphandler
{
 
  private class msg
  {
    public string name { get; set; }
    public string sendtime { get; set; }
    public string content { get; set; }
    public string readednams { get; set; }
    public int readedcount { get; set; }
    public string type { get; set; }
  }
 
  private static list<msg> msgs = new list<msg>();
  private static readerwriterlockslim rwlock = new readerwriterlockslim();
  private static object syncobject = new object(),syncobject1 = new object();
  private static list<string> onlinenames = new list<string>();
 
  public void processrequest(httpcontext context)
  {
    string chatname = context.request.form["name"];
    string msg = context.request.form["msg"];
    string actionname = context.request.form["action"];
    javascriptserializer jsserializer = new javascriptserializer();
 
    object responseobject = null;
 
    switch (actionname)
    {
      case "receive":
        {
          responseobject = getnewmessages(chatname);
          break;
        }
      case "send":
        {
          responseobject = sendmessage(chatname, msg, "normal");
          break;
        }
      case "on":
      case "off":
        {
          responseobject = setchatstatus(chatname, actionname);
          break;
        }
      case "onlines":
        {
          responseobject = onlinenames;
          break;
        }
    }
 
    context.response.contenttype = "text/json";
    context.response.write(jsserializer.serialize(responseobject));
 
  }
 
  private object setchatstatus(string chatname, string status)
  {
    if (status == "on")
    {
      if (onlinenames.exists(s => s == chatname))
      {
        return new { success = false, info = "该聊天妮称已经存在，请更换一个名称吧！" };
      }
      lock (syncobject1)
      {
        onlinenames.add(chatname);
      }
      sendmessage(chatname, "大家好，我进入聊天室了！", status);
      return new { success = true, info = string.empty };
    }
    else
    {
      lock (syncobject1)
      {
        onlinenames.remove(chatname);
      }
      sendmessage(chatname, "再见，我离开聊天室了！", status);
      return new { success = true, info = string.empty };
    }
  }
 
  /// <summary>
  /// 获取未读的新消息
  /// </summary>
  /// <param name="chatname"></param>
  /// <returns></returns>
  private object getnewmessages(string chatname)
  {
    //第一种：循环处理
    while (true)
    {
 
      var newmsgs = msgs.where(m => m.name != chatname && !(m.readednams ?? "").contains(chatname)).orderby(m => m.sendtime).tolist();
      if (newmsgs != null && newmsgs.count() > 0)
      {
        lock (syncobject)
        {
          newmsgs.foreach((m) =>
          {
            m.readednams += chatname + ",";
            m.readedcount++;
          });
          int chatnamecount = onlinenames.count();
          msgs.removeall(m => m.readedcount >= chatnamecount);
        }
 
        return new { success = true, msgs = newmsgs };
      }
 
      thread.sleep(1000);
    }
 
 
    //第二种方法，采用自旋锁
    //list<msg> newmsgs = null;
    //spinwait.spinuntil(() =>
    //{
    //  newmsgs = msgs.where(m => m.name != chatname && !(m.readednams ?? "").contains(chatname)).orderby(m => m.sendtime).tolist();
    //  return newmsgs.count() > 0;
    /
1 本网站名称：米米素材网
2 本站永久网址：https://www.mimisucai.cn
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

相关阅读

发表评论

说点什么吧
  • 全部评论（0）
    还没有评论，快来抢沙发吧！
取消
微信二维码
微信二维码
支付宝二维码
TAGS标签 充值帮助(？) 广告投放 网站地图 关于我们 用户协议 版权声明

Copyright2015-2023米米素材网收集了国内优质的素材网站大全. 涵盖PPT模板、海报、PSD素材、Word模板、元素、Excel表格、字体、CAD、广告设计、网站源码资源以及编程代码学习，为建站开发人员提供优质的服务。

本站采用创作共用版权. 基于DedeCMS搭建. 安全运行天 许可协议，转载或复制请注明出处

苏ICP备2022017718号苏ICP备2022017718号苏公网安备 32058502010603号苏公网安备 32058502010603号

微信公众号