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

2024-12-01 12:38:58

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

聊天室功能简介：

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

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

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

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

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

WEB前端源代码如下：(ChatPage.html)

<!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）　

<%@ 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);

    //rwLock.EnterWriteLock();
    //newMsgs.ForEach(m =>
    //{
    //  m.readednams += chatName + ",";
    //  m.readedCount++;
    //});
    //rwLock.ExitWriteLock();
    //return new { success = true, msgs = newMsgs };
  }

  /// <summary>
  ///
  /// </summary>
  /// <param name="chatName"></param>
  /// <param name="msg"></param>
  /// <returns></returns>
  private object SendMessage(string chatName, string msg, string type)
  {
    var newMsg = new Msg() { name = chatName, sendtime = DateTime.Now.ToString("yyyy/MM/dd HH:mm"), content =HttpContext.Current.Server.HtmlEncode(msg), readednams = null, type = type };
    //rwLock.EnterWriteLock();
    lock (syncObject)
    {
      msgs.Add(newMsg);
    }
    //rwLock.ExitWriteLock();
    return new { success = true, msgs = new[] { newMsg } };
  }

  public bool IsReusable
  {
    get
    {
      return false;
    }
  }

}

代码也相对简单，实现原理主要是：

1。聊天消息：循环获取未读的消息，在取出读的消息同时，将其标识为已读，全部已读的消息则删除；--我这里采用了两种方法，第二种方法被注释掉了，大家可以取消注释试试，也是不错的，比第一种更直观，建议使用；

2。发送消息：实例化一个消息实例并加入到聊天消息集合中；

3。状态切换：上线则加入到在线人员集合中，并生成一条上线消息放入到聊天消息集合中，离线则从在线人员集合中移除该人员信息，并生成一条离线消息放入聊天消息集合中；

注意事项，由于采用了全局静态集合，所以线程同步比较重要。

最终的实现效果展示如下：

张三：

李四：

小美：

如果觉得不错的话，给个推荐吧，你的支持是推动我不断前进的动力及写作的源泉，我一直坚持：知识在于分享，分享的同时自己也在成长，希望与大家共同成长，谢谢！

C#聊天程序服务端与客户端完整实例代码

本文所述为基于C#实现的多人聊天程序服务端与客户端完整代码.本实例省略了结构定义部分,服务端主要是逻辑处理部分代码,因此使用时需要完善一些窗体按钮之类的. 先看服务端代码如下: using System; using System.Drawing; using System.Collections; using System.ComponentModel; using System.Windows.Forms; using System.Data; using System.Net; using
c#实现多线程局域网聊天系统

觉得好有点帮助就顶一下啦. socke编程,支持多客户端,多线程操作避免界面卡死. 开启socket private void button1_Click(object sender, EventArgs e) { try { int port = int.Parse(txt_port.Text); string host = txt_ip.Text; //创建终结点 IPAddress ip = IPAddress.Parse(host); IPEndPoint ipe = new IPEnd
分享一个C#编写简单的聊天程序(详细介绍)

引言这是一篇基于Socket进行网络编程的入门文章,我对于网络编程的学习并不够深入,这篇文章是对于自己知识的一个巩固,同时希望能为初学的朋友提供一点参考.文章大体分为四个部分:程序的分析与设计.C#网络编程基础(篇外篇).聊天程序的实现模式.程序实现. 程序的分析与设计 1.明确程序功能如果大家现在已经参加了工作,你的经理或者老板告诉你,"小王,我需要你开发一个聊天程序".那么接下来该怎么做呢?你是不是在脑子里有个雏形,然后就直接打开VS2005开始设计窗体,编写代码了呢?在开始之
C#基于Windows服务的聊天程序（1）

本文将演示怎么通过C#开发部署一个Windows服务,该服务提供各客户端的信息通讯,适用于局域网.采用TCP协议,单一服务器连接模式为一对多:多台服务器的情况下,当客户端连接数超过预设值时可自动进行负载转移,当然也可手动切换服务器,这种场景在实际项目中应用广泛. 简单的消息则通过服务器转发,文件类的消息则让客户端自己建立连接进行传输.后续功能将慢慢完善. 自定义协议: 1.新建Windows服务项目 2.修改配置文件添加 <appSettings> <add key="maxQ
基于c#用Socket做一个局域网聊天工具

程序设计成为简单的服务端和客户端之间的通信, 但通过一些方法可以将这两者进行统一起来, 让服务端也成为客户端, 让客户端也成为服务端, 使它们之间可以互相随时不间断的通信. 考虑到实现最原始的服务端和客户端之间的通信所需要的步骤对于写这样的程序是很有帮助的. 作为服务端, 要声明一个Socket A并绑定(Bind)某一个IP+这个IP指定的通信端口, 比如这个是127.0.0.1:9050, 然后开始监听(Listen), Listen可以监听来自多个IP传过来的连接请求, 具体可以同时连接几
C#基于UDP实现的P2P语音聊天工具

语音获取要想发送语音信息,首先得获取语音,这里有几种方法,一种是使用DirectX的DirectXsound来录音,我为了简便使用一个开源的插件NAudio来实现语音录取. 在项目中引用NAudio.dll //------------------录音相关----------------------------- private IWaveIn waveIn; private WaveFileWriter writer; private void LoadWasapiDevicesCombo(
c#多线程网络聊天程序代码分享(服务器端和客户端)

XuLIeHua类库复制代码代码如下: using System;using System.Collections; using System.Collections.Generic;using System.Threading; using System.Runtime.Serialization;using System.Runtime.Serialization.Formatters.Binary;using System.Text;using System.IO;using Sy
C#实现简单聊天程序的方法

本文实例讲述了C#简单聊天程序实现方法.分享给大家供大家参考.具体如下: 假如有服务器端程序,ChatServer和客户端程序ChatClient.实现客户端向服务器端发送信息的简单功能. 运行步骤, 1.先是服务器端start listen, 2.然后客户端connect. 3.客户端发送消息只要服务器端start listen了,然后客户端也connect了.这样建立起连接后.接受发送信息就方便了,只要用writer,reader去操作NetworkStream 服务器ChatSe
C#制作简单的多人在线即时交流聊天室

实现网页版的在线聊天室的方法有很多,在没有来到HTML5之前,常见的有:定时轮询.长连接+长轮询.基于第三方插件(如FLASH的Socket),而如果是HTML5,则比较简单,可以直接使用WebSocket,当然HTML5目前在PC端并没有被所有浏览器支持,所以我的这个聊天室仍是基于长连接+长轮询+原生的JS及AJAX实现的多人在线即时交流聊天室,这个聊天室其实是我上周周末完成的,功能简单,可能有些不足,但可以满足在线即时聊天需求,分享也是给大家提供一个思路,大家可以基于此来实现更好的在线即时聊
300行代码实现go语言即时通讯聊天室

学了2年Java,因为工作原因需要转Golang,3天时间学习了下go的基本语法,做这样一个聊天室小项目来巩固串联一下语法. 实现的功能:公聊,私聊,修改用户名只用到了四个类: main.go:用来启动服务器 server.go:服务器相关代码 client.go:客户端相关代码,用户可以直接操作的可视化界面 user.go:用户类,用来封装用户的业务逻辑架构图完整代码 server.go package main import ( "fmt" "io" &q
Java基于UDP协议实现简单的聊天室程序

最近比较闲,一直在抽空回顾一些Java方面的技术应用. 今天没什么事做,基于UDP协议,写了一个非常简单的聊天室程序. 现在的工作,很少用到socket,也算是对Java网络编程方面的一个简单回忆. 先看一下效果: 实现的效果可以说是非常非常简单,但还是可以简单的看到一个实现原理. "聊天室001"的用户,小红和小绿相互聊了两句,"聊天室002"的小黑无人理会,在一旁寂寞着. 看一下代码实现: 1.首先是消息服务器的实现,功能很简单: •将客户端的信息(进入了哪一
PHP+swoole实现简单多人在线聊天群发

由于本文的能力有限,有好多聊天逻辑的细节没有实现,只实现了群发,具体代码如下所示: php代码: $serv = new swoole_websocket_server("127.0.0.1",3999); //服务的基本设置 $serv->set(array( 'worker_num' => 2, 'reactor_num'=>8, 'task_worker_num'=>1, 'dispatch_mode' => 2, 'debug_mode'=>
Java通过Socket实现简单多人聊天室

本文实例为大家分享了Java通过Socket实现多人聊天室的具体代码,供大家参考,具体内容如下 Socket可以实现网络上两个程序通过双向通道进行数据的交换,此外它是Java中网络TCP/IP协议的封装,例如可以进行网络通信等等,下面我们就来简单写一下多人聊天室. 首先来分析一下要实现的流程首先建立一个服务器端,构建ServerSocket并绑定端口创建socket客户端,连接到指定ip以及其端口然后使用accept阻塞接收socket发出的连接请求获取连接后的socket客户端的输入流
基于Flutter制作一个吃豆人加载动画

目录效果图绘制静态吃豆人.豆豆.眼睛加入动画属性总结效果图国际惯例,先看效果图: 具体效果就是吃豆人会根据吃不同颜色的豆子改变身体的颜色. 绘制静态吃豆人.豆豆.眼睛首先,我们需要将这个静态的吃豆人绘制出来,我们可以把吃豆人看做是一个实心圆弧,豆豆和眼睛就是一个圆. 关键代码: //画头 _paint ..color = color.value ..style = PaintingStyle.fill; var rect = Rect.fromCenter( center: Off
Python3使用PyQt5制作简单的画板/手写板实例

1.前言版本:Python3.6.1 + PyQt5 写一个程序的时候需要用到画板/手写板,只需要最简单的那种.原以为网上到处都是,结果找了好几天,都没有找到想要的结果. 网上的要么是非python版的qt程序(要知道qt版本之间差异巨大,还是非同一语言的),改写难度太大.要么是PyQt4的老程序,很多都已经不能在PyQt5上运行了.要么是大神写的特别复杂的程序,简直是直接做出了一个Windows自带的画图版,只能膜拜~ 于是我只能在众多代码中慢慢寻找自己需要的那一小部分,然后不断地拼凑,不断
利用css+原生js制作简单的钟表

利用css+原生js制作简单的钟表.效果如下所示实现该效果,分三大块:html.javascript.css html部分 html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期以及时间,至于钟表上的刻度.数字等元素,因为量比较多,采用jvascript生成 <!doctype html> <html> <head> <meta charset="UTF-8"> <link rel='stylesheet'
vs2010制作简单的asp.net网站

直入主题: 打开visual studio 2010程序开发软件单击菜单栏的文件,依次选新建->网站->ASP.NET空网站,这里我们选择空网站,利于今后DIY自己的网站,最好什么从头来,便于对各类架构的理解(若是选择ASP.NET网站也行,只是里面已经集成了一些东西) 这里我们默认解决方案的名称为WebSite1,单击确定后进入网站的代码页面,在右边的解决方案资源管理器里只有一个web.config文件,这个文件用于对网站进行全局化的设置 web.config其实是一个xml文档,里面有很
JSP制作简单登录界面实例

现在很多web项目都能用到登录界面,本文介绍一下JSP制作简单登录界面,分享给大家,具体如下: 运行环境 eclipse+tomcat+MySQL 不知道的可以参考Jsp运行环境--Tomcat 项目列表这里我先把jsp文件先放在Web-INF外面访问 1.需要建立的几个文件在图上.jsp 2.还要导入MySQL的jar包mysql-5.0.5.jar,导到WEB-INF中的lib文件夹就可以不需要Bulid Path 3.开始编写代码: 代码演示: index.jsp就好像一般网站的首页一样

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

相关推荐

随机推荐