TCP/IP в WPF: сервер и клиент на сокетах, AcceptAsync/ReceiveAsync/SendAsync, рассылка сообщений по списку клиентов

Многие из вас видели программы, которые передают данные внутри одной сети, либо играли в игры по локалке. Мы можем научиться создавать такие же вещи сами — простой мессенджер или игра по локальной сети. Для этого мы будем передавать данные через сокеты, используя модель TCP/IP, которую вы изучили ранее на компьютерных сетях.

В этой лекции мы подробно разберем создание сервера и клиента на примере мессенджера. По итогу должно получится что-то вроде этого.

Однако для этого, вспомним что такое TCP/IP и сокеты.

TCP/IP — это названия протоколов, которые лежат в основе интернета.

Благодаря им компьютеры обмениваются данными, не мешая друг другу. Оба протокола отвечают за передачу данных, но IP просто отправляет их в сеть, а TCP ещё следит за тем, чтобы эти данные попали по нужному адресу.

Сокет — это один конец двустороннего канала связи между двумя программами, работающими в сети. Соединяя вместе два сокета, можно передавать данные между разными процессами (локальными или удаленными).

Чтобы наша передача данных работала, нам нужен сокет как сервер, и сокет как клиент, который будет подключаться к нашему серверу. Начнем с разработки сервера.

Сервер #

Создам приложение, которое будет принимать в себя подключения разных клиентов. Именно через него у нас будет реализована связь остальных приложений. Интерфейс приложения будет следующим.

Сервер должен создаваться сразу после открытия окна, так что код я пропишу под InitializeComponent. Начнем.

Создание точки и сокета #

Для начала мне нужно создать конечную точку, к которой будут подключаться все клиенты. Создаю я её при помощи IPEndPoint. Внутри круглых скобок я пишу какие именно IP я жду для подключения (в данном случае все — IPAddress.Any), и по какому порту я их жду — 8888.

1
IPEndPoint ipPoint = new IPEndPoint(IPAddress.Any, 8888);

Дальше я создам новый канал — сокет — который будет работать внутри текущей сети через TCP/IP. Сам сокет я сделаю глобальным, чтобы я могла работать с ним из всех других методов.

Затем я привязываю точку к сокету.

1
socket.Bind(ipPoint);

И разрешаю подключаться максимум 1000 людям. Я жду их подключения, я слушаю канал чтобы их дождаться.

1
socket.Listen(1000);

Мой полный код будет выглядеть вот так.

1
public partial class MainWindow : Window
2
{
3
    private Socket socket;
4

5
    public MainWindow()
6
    {
7
        InitializeComponent();
8

9
        IPEndPoint ipPoint = new IPEndPoint(IPAddress.Any, 8888);
10
        socket = new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp);
11
        socket.Bind(ipPoint);
12
        socket.Listen(1000);
13
    }
14
}

Бесконечное ожидание клиентов #

Теперь мне нужно бесконечно ждать подключения моих клиентов.

Бесконечность я сделаю при помощи while(true), а чтобы у меня интерфейс работал параллельно с циклом, я сделаю отдельный Task. Помним, что все таски у меня асинхронные, так как работают не вместе с интерфейсом.

1
private async Task ListenToClients()
2
{
3
    while (true)
4
    {
5

6
    }
7
}

Внутри цикла я буду принимать все входящие подключения. Но чтобы их принять, мне для начала нужно их дождаться при помощи await. Только дождавшись подключения я буду продолжать свой код.

1
private async Task ListenToClients()
2
{
3
    while (true)
4
    {
5
        await socket.AcceptAsync();
6
    }
7
}

Этот метод я вызову сразу же после включения прослушки сокета. Его я ждать не буду, пусть крутится себе на фоне.

1
socket.Listen(1000);
2

3
ListenToClients();

Как работает клиент-серверное приложение #

Что же делать с моими клиентами? Для этого нужно определиться как будет работать наше клиент-серверное приложение. Я зарисую.

Скажем, к моему серверу подключились 4 компьютера. 1 из них отправляет сообщение на сервер. Сам компьютер ещё не видит, что он отправил сообщение, он только нажал на кнопку «Отправить».

Как только сервер получит это сообщение, он отправит его обратно всем клиентам, которые к нему подключены, включая клиента, который отправил это сообщение.

И уже как только клиент получил сообщение с сервера обратно, он его отобразит у себя на экране. Так мы будем уверены, что если сообщение отобразилось у нас, оно отобразилось у всех. Однако для того, чтобы сервер смог отправить сообщение всем клиентам, каждый раз, когда подключился новый клиент, мы должны:

• добавить его в какой-то список, например, List<Socket> clients;
• включить прослушку сообщений для каждого нового клиента.

Список клиентов #

Начнем с листа. Создам новый лист с сокетами и после того, как я дождалась подключения нового человека, я добавлю его в лист.

Приём сообщений от клиента #

С прослушкой немного сложнее. Мне опять же нужно сделать бесконечный цикл, который постоянно будет слушать поступающие сообщения именно от этого сокета. Я сделаю ещё один асинхронный таск с бесконечным циклом внутри. Таск будет принимать сокет-клиент, переменную с ним назову client. На этот раз, внутри цикла, я буду ждать данных от сокета при помощи client.ReceiveAsync().

Сам метод я вызову сразу после добавления сокета-клиента в лист. Ждать его я не буду.

1
clients.Add(client);
2
RecieveMessage(client);

Однако метод просит какие-то значения внутри круглых скобок — коллекцию байтов и настройка сокета. Что нам ему дать?

Вспомним, что TCP/IP делит само сообщение на байты, а потом каждый байт отправляет отдельным пакетом. Когда мы получаем сообщение, нам нужно место, куда сокет запишет полученные байты. Для этого чуть выше создадим пустой массив байтов на, скажем, 1024 байта. Этот пустой массив передадим внутрь метода, как контейнер для сообщений.

Никакие особые настройки сокета нам не нужны, так что просто пометим SocketFlags.None после запятой.

Чтобы получить это сообщение обратно в текстовый вид, нам необходимо конвертировать байты в текст. Отделаться обычным Convert.ToString() здесь не получится — нам необходимо получить строку из кодировки UTF8. Делается это следующим образом. ЗАМЕТЬТЕ, что мы берем Encoding, не Encoder.

Полученное сообщение мы в будущем сможем использовать где угодно — вывести его в MessageBox, поместить в текстовое поле или ListBox.

Кстати о нем. Вспомним, что у нас на интерфейсе есть ListBox. Давайте поместим туда сообщение в формате: [Сообщение от <IP адрес клиента>]: <сообщение>. Чтобы взять IP адрес клиента, нужно взять RemoteEndPoint из сокета-клиента.

1
MessagesLbx.Items.Add($"[Сообщение от {client.RemoteEndPoint}]: {message}");

Рассылка сообщения всем клиентам #

После того, как мы получили сообщение от клиента, это сообщение нужно отправить всем остальным клиентам. Вспомним, что у нас есть лист с сокетами-клиентами, по которому мы можем пробежаться через цикл. Так и сделаем.

Внутри я хочу отправить сообщение этому клиенту. Для этого я сделаю отдельный метод-таск по отправке. Внутрь я также передам сокет-клиент и сообщение, которое я хочу отправить.

Этот метод я вызову внутри цикла. Опять же, ждать я этот метод не буду, пусть он на фоне одновременно отправит всем остальным клиентам это сообщение.

Внутри метода SendMessage мне опять необходимо преобразовать текст в массив байтов при помощи Encoding.UTF8, но уже для отправки я буду использовать не RecieveAsync(), а SendAsync(). Её содержимое идентично RecieveAsync() — массив с байтами и настройки сокета. Саму отправку я уже буду ждать.

Запуск сервера #

На этом создание сервера у нас будет окончено. Запустим приложение и увидим, что при первом запуске брандмауэр Windows просит нас разрешить доступ к другим компьютерам в этой сети. Обязательно разрешаем, так как иначе сокеты работать не будут.

Разрешили, запустили, и видим, что приложение работает — уже хорошо. Чтобы посмотреть его полный функционал, нам осталось написать клиент.

Клиент #

Для клиента я создам отдельное приложение с очень простым интерфейсом — списком с сообщениями, текстовым полем MessageTxt, и кнопкой «Отправить». Каждый раз, когда мы будем получать сообщение от сервера, мы будем добавлять их внутрь списка MessagesLbx.

Подключение к серверу #

Начнем с того, что прямо при запуске окна мы должны подключиться к нашему серверу, так что код я буду писать сразу после InitializeComponent(). Делаем мы это следующим образом:

Также, как и на сервере, нам нужно создать сокет. Сокет будет иметь те же параметры — внутри сети, работать через поток через протокол TCP/IP. Сразу сделаю сокет глобальной переменной, чтобы я могла взаимодействовать с ним везде. В данном случае, это будет сокет, к которому я подключаюсь, так что это будет сокет сервера.

Теперь, подключимся к серверу при помощи server.Connect(<IP адрес>, <порт>);. Порт мы возьмем тот же, что и указали в коде — 8888, а вот с IP интереснее. Если я проверяю работу приложения на своем локальном компьютере, я впишу адрес 127.0.0.1 — локалхост. Если я проверяю работу на других компьютерах, я впишу адрес компьютера, на котором запущен сервер. Для такой проверки используйте Radmin VPN или любое другое приложение, при помощи которого вы в майнкрафт по локалке играли или прочее. Подождем подключение, чтобы всё работало корректно.

1
server.Connect("127.0.0.1", 8888);

Перенос методов из сервера #

После подключения я вольна делать всё что угодно — отправлять или получать сообщения с сервера. Вспомним, что мы уже писали для сервера методы по отправке и получению данных, так что я скопирую и вставлю код из другого проекта.

Видоизменю эти методы под нужды клиента.

• Самому клиенту уже не нужно отправлять сообщения всем клиентам разом, так что foreach и его содержимое я удалю.
• Сообщение внутрь ListBox также видоизменю — просто вставлю полученное сообщение.
• Все параметры client из Send и RecieveMessage я удалю и заменю его на мою переменную server, так как я жду/отправляю сообщения только в него.

Вызов методов из клиента #

Осталось только в нужных местах вызвать эти методы.

Метод RecieveMessage() я вызову сразу после подключения к серверу. Опять же, ждать его я не буду, он будет получать сообщения на фоне.

SendMessage() я помещу внутрь нажатия на кнопку, чтобы отправлять сообщение. Внутрь метода передам текст из текстбокса MessageTbx.

1
private void Button_Click(object sender, RoutedEventArgs e)
2
{
3
    SendMessage(MessageTxt.Text);
4
}

Проверка #

Осталось проверить как всё работает. Запущу 1 приложение-сервер и 2 приложения-клиента, дважды нажав на незаполненный плей в Visual Studio. Начну отправлять сообщения из одного приложения и из другого. Так будет выглядеть сообщение из одного клиента, и так будет выглядеть из другого.

При помощи такого кода мы можем подключать сколько угодно приложений-клиентов, до тысячи (столько же, сколько мы указали в Listen).

Дальнейший функционал можно настраивать согласно тому, какое именно сообщение нам пришло. Например, если сообщение содержит /username (if (message.Contains("/username"))), значит внутри него будет имя пользователя, которое нужно обрезать и прочее. Таким образом мы можем работать с основой передачи данных в локальной сети.

Полный код примера #

Сервер #

server/MainWindow.xaml — простой интерфейс с лог-листом входящих:

1
<Window x:Class="server.MainWindow"
2
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4
        Title="Я — сервер" Height="367" Width="256">
5
    <Grid>
6
        <Grid.RowDefinitions>
7
            <RowDefinition Height="Auto"/>
8
            <RowDefinition/>
9
        </Grid.RowDefinitions>
10
        <TextBlock Text="Входящие сообщения" HorizontalAlignment="Center" Margin="10"/>
11
        <ListBox Grid.Row="1" x:Name="MessagesLbx" Margin="10"/>
12
    </Grid>
13
</Window>

server/MainWindow.xaml.cs — слушаем подключения, принимаем сообщения, рассылаем всем:

1
using System.Collections.Generic;
2
using System.Net;
3
using System.Net.Sockets;
4
using System.Text;
5
using System.Threading.Tasks;
6
using System.Windows;
7

8
namespace server
9
{
10
    public partial class MainWindow : Window
11
    {
12
        private Socket socket;
13
        private List<Socket> clients = new List<Socket>();
14

15
        public MainWindow()
16
        {
17
            InitializeComponent();
18

19
            IPEndPoint ipPoint = new IPEndPoint(IPAddress.Any, 8888);
20
            socket = new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp);
21
            socket.Bind(ipPoint);
22
            socket.Listen(1000);
23

24
            ListenToClients();
25
        }
26

27
        private async Task ListenToClients()
28
        {
29
            while (true)
30
            {
31
                var client = await socket.AcceptAsync();
32
                clients.Add(client);
33
                RecieveMessage(client);
34
            }
35
        }
36

37
        private async Task RecieveMessage(Socket client)
38
        {
39
            while (true)
40
            {
41
                byte[] bytes = new byte[1024];
42
                await client.ReceiveAsync(bytes, SocketFlags.None);
43
                string message = Encoding.UTF8.GetString(bytes);
44

45
                MessagesLbx.Items.Add($"[Сообщение от {client.RemoteEndPoint}]: {message}");
46

47
                foreach (var item in clients)
48
                {
49
                    SendMessage(item, message);
50
                }
51
            }
52
        }
53

54
        private async Task SendMessage(Socket client, string message)
55
        {
56
            byte[] bytes = Encoding.UTF8.GetBytes(message);
57
            await client.SendAsync(bytes, SocketFlags.None);
58
        }
59
    }
60
}

Клиент #

client/MainWindow.xaml — список сообщений, поле ввода, кнопка «Отправить»:

1
<Window x:Class="client.MainWindow"
2
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4
        Title="MainWindow" Height="367" Width="256">
5
    <Grid>
6
        <Grid.RowDefinitions>
7
            <RowDefinition/>
8
            <RowDefinition Height="Auto"/>
9
        </Grid.RowDefinitions>
10
        <ListBox x:Name="MessagesLbx" Margin="10"/>
11
        <Grid Grid.Row="1">
12
            <Grid.ColumnDefinitions>
13
                <ColumnDefinition/>
14
                <ColumnDefinition Width="Auto"/>
15
            </Grid.ColumnDefinitions>
16
            <TextBox x:Name="MessageTxt" Margin="10"/>
17
            <Button Grid.Column="1" Content="Отправить" Margin="10" Click="Button_Click"/>
18
        </Grid>
19
    </Grid>
20
</Window>

client/MainWindow.xaml.cs — подключение к 127.0.0.1:8888, приём и отправка через тот же сокет:

1
using System.Net.Sockets;
2
using System.Text;
3
using System.Threading.Tasks;
4
using System.Windows;
5

6
namespace client
7
{
8
    public partial class MainWindow : Window
9
    {
10
        private Socket server;
11

12
        public MainWindow()
13
        {
14
            InitializeComponent();
15

16
            server = new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp);
17
            server.Connect("127.0.0.1", 8888);
18
            RecieveMessage();
19
        }
20

21
        private void Button_Click(object sender, RoutedEventArgs e)
22
        {
23
            SendMessage(MessageTxt.Text);
24
        }
25

26
        private async Task RecieveMessage()
27
        {
28
            while (true)
29
            {
30
                byte[] bytes = new byte[1024];
31
                await server.ReceiveAsync(bytes, SocketFlags.None);
32
                string message = Encoding.UTF8.GetString(bytes);
33
                MessagesLbx.Items.Add(message);
34
            }
35
        }
36

37
        private async Task SendMessage(string message)
38
        {
39
            byte[] bytes = Encoding.UTF8.GetBytes(message);
40
            await server.SendAsync(bytes, SocketFlags.None);
41
        }
42
    }
43
}