본문 바로가기
wpf/c#, wpf 채팅프로그램

c#,wpf 채팅프로그램 만들기 - 9 - 소켓통신(TcpListener, TcpClient)을 이용한 채팅프로그램을 만들어보자(wpf를 사용하여 로그인화면 만들기)

by devjh 2020. 10. 9.
반응형

채팅프로그램 만들기는 총 12개의 게시글로 구성되어있습니다.

 

첫번째 게시글 : 1:1단발성통신(동기서버 동기클라)

 

두번째 게시글 : 1:1지속성통신(동기서버 완성본 동기 클라이언트)

 

세번째 게시글 : 1:1통신(비동기서버)

 

네번째 게시글: 1:N통신(여기서부터는 여러명을 받아야하므로 당연히 비동기서버입니다.)

 

다섯번째 게시글 : 채팅프로그램 콘솔 서버

 

여섯번째 게시글 : 채팅프로그램 콘솔 클라이언트

 

일곱번째 게시글 : wpf를 통해 View를 구현한 서버

 

여덟번째 게시글 : wpf를 통해 View를 구현한 클라이언트(메인화면 만들기)

 

아홉번째 게시글 : wpf를 통해 View를 구현한 클라이언트(로그인화면 만들기)

 

열번째 게시글 : wpf를 통해 View를 구현한 클라이언트(채팅상대 선택화면 만들기)

 

열한번째 게시글 : wpf를 통해 View를 구현한 클라이언트(채팅화면 만들기)

 

열두번째 게시글 : wpf를 통해 View를 구현한 클라이언트(로직 구현)

 


 

이번 게시글에에서는 채팅프로그램 클라이언트편(로그인창 만들기)을 포스팅하겠습니다.

 

먼저 로그인창부터 만들어 보겠습니다.

 

이번 솔루션파일은 총 네개의 파일(MainWindow.xaml, MainWindow.cs, Login.xaml, Login.cs)

 

로 구성되어있습니다.

 

 

1. MainWindow.xaml

<Window x:Class="ChattingClient.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ChattingClient"
        mc:Ignorable="d"
        Title="ChattingServiceClient" Height="450" Width="600" Background="#BCBCBC">
    <Border BorderThickness="0" CornerRadius="10" Margin="10,30,10,10" Background="White">
        <StackPanel Orientation="Vertical" Margin="40,15,40,5">
            <TextBlock Foreground="Gray" FontSize="50" FontFamily="Ebrima" Text="Chatting Program" TextAlignment="Center" Margin="0,0,0,20"></TextBlock>
            <TextBlock x:Name="Info" Foreground="Gray" FontSize="20" Text="채팅프로그램을 이용려면 먼저 로그인해주세요" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,30"></TextBlock>
            <Button x:Name="Login_Btn" FontSize="20" Content ="로그인" Margin="0,0,0,25" Height="45" Click="Login_Btn_Click"/>
            <Button x:Name="OneOnOneChatting_Btn" FontSize="20" Content ="1:1채팅" Margin="0,0,0,25" Height="45" Click="OneOnOneChatting_Btn_Click"/>
            <Button x:Name="GroupChatting_Btn" FontSize="20" Content ="그룹채팅" Margin="0,0,0,25" Height="45" Click="GroupChatting_Btn_Click"/>
        </StackPanel>
    </Border>
</Window>

 

이전 게시글에서 만든 메인화면입니다.

 

 

2. MainWindow.cs

namespace ChattingClient
{
    /// <summary>
    /// MainWindow.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class MainWindow : Window
    {
        TcpClient client = null;
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Login_Btn_Click(object sender, RoutedEventArgs e)
        {
            if (client != null)
            {
                MessageBox.Show("이미 로그인되었습니다.", "Information", MessageBoxButton.OK, MessageBoxImage.Information);
                return;
            }

            Login login = new Login();
            if (login.ShowDialog() == true)
            {
                try
                {
                    string ip = login.IpTextBox.Text;
                    string parsedName = "%^&";
                    parsedName += login.NameTextBox.Text;

                    client = new TcpClient();
                    client.Connect(ip, 9999);

                    byte[] byteData = new byte[parsedName.Length];
                    byteData = Encoding.Default.GetBytes(parsedName);
                    client.GetStream().Write(byteData, 0, byteData.Length);

                    Info.Text = string.Format("{0} 님 반갑습니다 ", login.NameTextBox.Text);
                    myName = login.NameTextBox.Text;

                    ReceiveThread = new Thread(RecieveMessage);
                    ReceiveThread.Start();
                }

                catch
                {
                    MessageBox.Show("서버연결에 실패하였습니다.", "Server Error", MessageBoxButton.OK, MessageBoxImage.Error);
                    client = null;
                }
            }
        }

        private void OneOnOneChatting_Btn_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("1:1 채팅하기", "Information", MessageBoxButton.OK, MessageBoxImage.Information);
        }

        private void GroupChatting_Btn_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("그룹 채팅하기", "Information", MessageBoxButton.OK, MessageBoxImage.Information);
        }
    }
}

로그인여부를 확인하여 로그인되어있지 않다면

 

Login창을 ShowDIalog 방식(메인스레드 블락)으로 띄워줍니다.

 

showDialog가 ture가 돼서 로그인검증이 끝났다면

 

서버에 연결해줍니다.($%^은 서버편에 정의했던 사용자 이름을 저장하는 프로토콜입니다.)

 

3. Login.xaml

<Window x:Class="ChattingClient.Login"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ChattingClient"
        mc:Ignorable="d"
        Title="Login" Height="350" Width="500" Background="#BCBCBC">
    <Border BorderThickness="0" CornerRadius="10" Margin="10,30,10,10" Background="White">
        <StackPanel Orientation="Vertical" Margin="40,15,40,5">
            <TextBlock Foreground="Gray" FontSize="35" FontFamily="Ebrima" Text="LOGIN"></TextBlock>
            <TextBlock Foreground="Gray" FontSize="13" Text="이름과 서버ip를 입력해주세요"></TextBlock>
            <TextBlock Text="이름" Foreground="Gray" FontWeight="Bold" Margin="0,10,0,0"></TextBlock>
            <Border BorderThickness="1.3" BorderBrush="Gray" Height="40" CornerRadius="13" Padding="5,10,5,5">
                <TextBox x:Name="NameTextBox" BorderThickness="0" TextAlignment="Center" FontSize="15"></TextBox>
            </Border>
            <TextBlock Text="서버ip" Foreground="Gray" FontWeight="Bold"></TextBlock>
            <Border BorderThickness="1.3" BorderBrush="Gray" Height="40" CornerRadius="13" Padding="5,10,5,5">
                <TextBox x:Name="IpTextBox" BorderThickness="0" TextAlignment="Center" FontSize="15"></TextBox>
            </Border>
            <Button x:Name="Login_Btn" Margin="0,25,0,0" FontSize="20" Content ="로그인" Click="Login_Btn_Click"/>
        </StackPanel>
    </Border>
</Window>

 

로그인창입니다.

 

4. Login.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace ChattingClient
{
    /// <summary>
    /// Login.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class Login : Window
    {
        public Login()
        {
            InitializeComponent();
        }

        private void Login_Btn_Click(object sender, RoutedEventArgs e)
        {
            if (string.IsNullOrEmpty(NameTextBox.Text) || string.IsNullOrEmpty(IpTextBox.Text))
            {
                MessageBox.Show("이름과 ip를 정확히 입력해주세요", "Login Error", MessageBoxButton.OK, MessageBoxImage.Error);
                return;
            }

            string nameCheck = string.Format("당신은 {0} 님이 맞습니까?", NameTextBox.Text);
            MessageBoxResult nameMessageBoxResult = MessageBox.Show(nameCheck, "Question", MessageBoxButton.YesNo, MessageBoxImage.Question);
            if (nameMessageBoxResult == MessageBoxResult.No)
            {
                return;
            }

            string ipCheck = string.Format("서버의 ip는 {0} 이 맞습니까?", IpTextBox.Text);
            MessageBoxResult ipmessageBoxResult = MessageBox.Show(ipCheck, "Question", MessageBoxButton.YesNo, MessageBoxImage.Question);
            if (ipmessageBoxResult == MessageBoxResult.No)
            {
                return;
            }

            this.DialogResult = true;
        }
    }
}

사용자의 이름과 ip 입력에 간단한 유효성 검사를 하였으며

 

최종 확인을 위한 MessageBox를 넣었습니다.

 

5. 결과화면

 

메인화면

 

로그인창

 

유효성 검사(좌측은 입력은 안한경우)

 

 

로그인을 했을시 JH 님 반갑습니다로 Info 텍스트블럭 수정

 

서버에 정상적으로 로그인된것을 확인 할 수 있습니다.

반응형

댓글