- \n
- Download the server source code from GitHub here<\/a>.<\/li>\n
- Install dotnet core 2.0 on your machine to run the server. Find the instructions here<\/a>.<\/li>\n
- Run
dotnet run<\/code> in the terminal once you\u2019re in the source directory.<\/li>\n- Visit http:\/\/locahosthost:5000 or http:\/\/(IP\/Hostname):5000, and make sure you see Easy chat<\/em> service message on the web page.<\/li>\n<\/ol>\n
Building the Mobile Client<\/h3>\n
Let\u2019s start with creating a blank Xamarin.Forms app leveraging a shared project (a .NET Standard library could also be used) and call it EasyChat<\/em>. We’ll use the System.Net.WebSockets.Client<\/a> NuGet package in our mobile apps to communicate with the server.<\/p>\n
Once the project is created, we can use the MainPage.xaml<\/em> as a simple sign in page from which we’ll navigate to the chat room.\n
![\"\"](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/44\/2019\/03\/WebSocket_EasyChat.png\")
<\/p>\nNext, we can add a new page for the chat room, ChatPage.xaml<\/em>, and a very simple View Model called ChatPageViewModel.cs<\/em> to handle WebSocket’s client-side code. Here in this view model, we have code to connect to the server and send and receive messages.<\/p>\n
Connecting to a Socket<\/h3>\n
Using the
System.Net.WebSockets.ClietWebSocket<\/code> object to establish the connection, this object will be used subsequently to communicate with the server<\/p>\nvar client = new ClientWebSocket();\n...\nasync void ConnectToServerAsync() \n{\n await client.ConnectAsync(new Uri(\"ws:\/\/10.0.2.2:5000\"), cts.Token);\n UpdateClientState();\n\n await Task.Factory.StartNew(async () => \n {\n while (true) \n {\n await ReadMessage();\n }\n }, cts.Token, TaskCreationOptions.LongRunning, TaskScheduler.Default);\n}<\/code><\/pre>\nNotice I’m using the IP address
10.0.2.2<\/code> to connect to the server with theConnectAsync<\/code> method. This is the default host IP on the Android emulator<\/strong>, and we cannot uselocalhost<\/code> or the default localhost IP.<\/p>\niOS simulator running on Mac does allow us to use
localhost<\/code>, but when running on an iOS\/Android device we must use hostname\/IP address.<\/p>\nReading Messages<\/h3>\n
Once a connection is open with the server, we can start monitoring for the incoming messages using the
ReceiveAsync<\/code> method. In this scenario, the messages are UTF8 encoded byte array; when we receive the message we have to convertbytes<\/code> into readablestring<\/code> and ignore anything that is not text<\/p>\nasync Task ReadMessage() \n{\n WebSocketReceiveResult result;\n var message = new ArraySegment(new byte[4096]);\n do \n {\n result = await client.ReceiveAsync(message, cts.Token);\n if (result.MessageType != WebSocketMessageType.Text)\n break;\n var messageBytes = message.Skip(message.Offset).Take(result.Count).ToArray();\n string receivedMessage = Encoding.UTF8.GetString(messageBytes);\n Console.WriteLine(\"Received: {0}\", receivedMessage);\n } \n while (!result.EndOfMessage);\n}<\/code><\/pre>\n<\/p>\n
Sending Messages<\/h3>\n
To send a message, we first need to convert the text to a byte array (using UTF8 encoding) and call the
SendAsync<\/code> method. Additionally,SendAsync<\/code> requires parameters to identify the message type, and if it is the end of the message.<\/p>\nasync void SendMessageAsync(string message) \n{\n if (!CanSendMessage(message))\n return;\n\n var byteMessage = Encoding.UTF8.GetBytes(message);\n var segmnet = new ArraySegment(byteMessage);\n\n await client.SendAsync(segmnet, WebSocketMessageType.Text, true, cts.Token);\n}<\/code><\/pre>\n<\/p>\n
Wrapping Up<\/h3>\n
In this post, we reviewed the necessary code to connect, receive, and send messages in real-time using Web Socket in Xamarin apps. You can explore more about the available APIs on MSDN<\/a> and download the completed sample Xamarin.Forms application on GitHub<\/a>.<\/p>\n
- Install dotnet core 2.0 on your machine to run the server. Find the instructions here<\/a>.<\/li>\n