zoukankan      html  css  js  c++  java
  • [原创]简易版Socket聊天室 附源码

    这是继扫雷之后的另一个C#习作,实现了一个带表情的聊天室。个人认为主要的工作量分别在于:异步Socket、XML序列化、设计简单的通讯协议以及如何实现带表情的对话框这四部分。这里先介绍一个基本结构,希望能抛砖引玉。

    先上截图:

    1. 程序结构

    我的程序分为三个主要部件,分别在三个工程里实现:Client,Server,Common

    其中,Client和Server主要是GUI和业务逻辑的实现。Common工程里封装了Client和Server都需要的Socket通讯模块,基中SocketHandler.cs是在Socket上进一步封装,为上层应用隐去了异步Socket传输的细节,同时根据协议把Socket传输的Byte流转换成对象后传递给上层应用。

    SocketHandler提供的接口有:

    a) Socket Connect(string ipAddress)    Client端使用

    b) Socket Listen()    Server端使用

    c) void SendPacket(Socket s, DataPacket data)   Client和Server之间传输消息的接口,注:DataPacket是在Common>ChatCommand.cs里定义的对象

    d) void BroadCastPacket(DataPacket data)    Server端通过该接口给所有连接的Client广播数据包

    初始化SocketHander的代码(见Form1.cs)

            SocketHandler handler = new SocketHandler();

            handler.OnDataArrive += OnDataArrive;


    OnDataArrive是处理收到数据后业务逻辑的EventHandler:

    void OnDataArrive(DataPacket data, Socket s)

    如此,Server端和Client端的区别仅仅在于OnDataArrive事件触发后实现不同的逻辑,以及在初始化时,分别调用SocketHandler中的Connect/Listen接口。


    2. 通讯协议

    通讯协议的接口主要在Common.ChatCommand.cs中实现。传输的数据是XmlSerializable的DataPacket Class。

    CommandCode指示了DataPacket里包含的是哪一种类型的数据:

        public enum CommandCode
        {
            None,   (无意义,仅在初始化时使用)
            SendMessage,   (传输聊天数据,当CommandCode为SendMessage时,DataPacket中将包含message,time,sender这三个field)
            BroadCastMessage,   (无数据,该消息用来通知所有Client新的聊天数据已经到达,Client须调用PollMessage来获取聊天数据)
            PollMessage,  (包含LastRetrievedMessageTime,Server端在收到该消息后,会将在LastRetrievedMessageTime之后的一条消息传递给Client端)

        }

    基本的通讯流程如下:

    1. 当ClientA发送消息时,他会发送一个含SendMessage的DataPacket到Server。

    2. Server收到SendMessage的消息后,会将该消息存到本地的聊天记录中,然后广播BoradCastMessage给所有的客户端。这里并不直接发送聊天数据,可以由Client来选择正确的时机来读取数据。

    3. 当ClientA,B...N收到BroadCastMessage时,得知有新消息到达,发送PollMessage到Server,获取消息。

    4. Server收到PollMessage类型的DataPacket后,根据LastRetrievedMessageTime找到Client所需要的消息,发送SendMessage类型的DataPacket到Client

    5. 当Client收到SendMessage后,SocketHandler会调用OnDataArrive事件,Client在界面上显示该消息。

    3. 关于界面的实现

    界面实现的时候有两个难点,一是如果把GIF的表情放到textBox中,另一个是要实现一个类似对话框的给用户选择表情。

    这里参照了两篇CodeProject上的文档:

    http://www.codeproject.com/KB/edit/csexrichtextbox.aspx?print=true 这篇是关于如果在RichTextBox中插入GIF格式的图片的。注,网上比较容易找到的是通过Paste的方法把图片插入到RichTextBox的代码,但是这样做一会影响原先剪贴板中的内容,二是对GIF格式无效。这篇文档的作者很牛,他的做法是直接把图片转换成RTF格式然后插入到RichTextBox里。只不过实现起来太麻烦了,所以我直接引用了他的控件 ^^

    http://www.codeproject.com/KB/miscctrl/simplepopup.aspx 这篇文档介绍了怎么做弹出效果。我自己写了一个Panel的控件在ChatClient.EmotionPanel.cs里


    最后附上源代码:

    ChatRoom.rar

    Edit: 忘记上传表情包了:Face2.rar。解压放到c:\face2下面去后就能运行了。我承认我丑陋了,怎么也该写一个post build script啊。

  • 相关阅读:
    Coursera 算法二 week 5 BurrowsWheeler
    pta 编程题7 List Leaves
    pta 编程题6 树的同构
    pta编程题5 Pop Sequence
    pat乙级1067
    pat乙级1060
    pat乙级1059
    1.ActionBar
    安卓开发必须收藏的网站
    genymotion常见问题解答
  • 原文地址:https://www.cnblogs.com/magicdlf/p/ChatRoom.html
Copyright © 2011-2022 走看看