Add a new file called ChatViewController into the Views project of the Chat.iOS project and implement the following:

 
public class ChatViewController : UIViewController, ChatPresenter.IChatView {
         #region Private Properties
         private ChatPresenter _presenter;
         private UITextField _chatField;
         private UIScrollView _scrollView;
         private int _currentTop = 20;
         private nfloat _width;
         #endregion
  
         #region Constructors
         public ChatViewController(ChatPresenter presenter)
         {
             _presenter = presenter;
         }
         #endregion
 
} 

We have multiple Private properties, one for the presenter, a local UITextField. We need this UI object to be local, as we need to extract the Text value to send through the SignalRClient, and we also need the UIScrollView to be local so we can change the content size and add in ChatView  objects. The integers are use to record the current top (y-axis + height) of the all chat messages which will display on the screen. Finally, the remaining nfloat is used for recording the height and width of the screen.

Let's now add the ViewDidLoad function to build the user interface:

#region Public Methods
         public override void ViewDidLoad()
         {
             base.ViewDidLoad();
             Title = "Chat Room";
             _presenter.SetView(this);
             View.BackgroundColor = UIColor.White;
             _width = View.Bounds.Width;
             var _sendButton = new UIButton(UIButtonType.RoundedRect)
             {
                 TranslatesAutoresizingMaskIntoConstraints = false
             };
             _sendButton.SetTitle("Send", UIControlState.Normal);
             _sendButton.TouchUpInside += HandleSendButton;
             _chatField = new UITextField()
             {
                 TranslatesAutoresizingMaskIntoConstraints = false,
                 BackgroundColor = UIColor.Clear.FromHex("#DFE4E6"),
                 Placeholder = "Enter message"
             };
             _scrollView = new UIScrollView()
             {
                 TranslatesAutoresizingMaskIntoConstraints = false,
             };
             Add(_chatField);
             Add(_sendButton);
             Add(_scrollView);
             var views = new DictionaryViews()
             {
                 {"sendButton", _sendButton},
                 {"chatField", _chatField},
                 {"scrollView", _scrollView},
             };
             this.View.AddConstraints(
                 NSLayoutConstraint.FromVisualFormat("V:|-68-[chatField(60)]", NSLayoutFormatOptions.DirectionLeftToRight, null, views)
                 .Concat(NSLayoutConstraint.FromVisualFormat("V:|-62-[sendButton(60)]-20-[scrollView]|", NSLayoutFormatOptions.DirectionLeftToRight, null, views))
                 .Concat(NSLayoutConstraint.FromVisualFormat("H:|-5-[chatField]-[sendButton(60)]-5-|", NSLayoutFormatOptions.AlignAllTop, null, views))
                 .Concat(NSLayoutConstraint.FromVisualFormat("H:|[scrollView]|", NSLayoutFormatOptions.AlignAllTop, null, views))
                 .ToArray());
         }  
         #endregion  

The chat screen will contain a UITextField, a UIButton, and a UIScrollView. The button is for notifying the current Text value of the UITextField to be sent to the server Hub, and our UIScrollView will contain all the messages published from each client.

We also want to add the ViewDidUnload() function, so we can remove the OnDataReceived event on the SignalRClient:

public override void ViewDidUnload()
         {
             base.ViewDidUnload();
             _presenter.ReleaseView();
         } 

Let's then add the IView  implementation:

#region IView implementation
         public void SetMessage(string message)
         {
             var alert = new UIAlertView()
             {
                 Title = "Chat",
                 Message = message
             };
             alert.AddButton("OK");
             alert.Show();
         }
         public bool IsInProgress { get; set; } #endregion  

The IView  implementation is the same as with the ClientsListViewController.

Let's create a new file called ChatBoxView.cs and add it to the Views folder. We will create a new one of these for every chat message:

public class ChatBoxView : UIView
     {
         private UILabel messageLabel;
         public ChatBoxView(string message)
         {
             Layer.CornerRadius = 10;
             messageLabel = new UILabel()
             {
                 TranslatesAutoresizingMaskIntoConstraints = false,
                 Text = message
             };
             Add(messageLabel);
             var views = new DictionaryViews()
             {
                 {"messageLabel", messageLabel},
             };
             AddConstraints(NSLayoutConstraint.FromVisualFormat("V:|[messageLabel]|", NSLayoutFormatOptions.AlignAllTop, null, views)
                 .Concat(NSLayoutConstraint.FromVisualFormat("H:|-5-[messageLabel]-5-|", NSLayoutFormatOptions.AlignAllTop, null, views))
                 .ToArray());
         }
     }  

This is a very simple object that contains one UILabel for the chat message. We also set the height and width of this label to the height and width of the UIView using NSAutoLayout. We also round the corners of the Layer to 5.

If you have ever used the SMS application on any iOS device, you will see we have two colors, distinguishing between you and the person you are talking to. We are going to do the same with our application but instead of using standard colors from the UIColor interface, we are going to use custom hex colors.