Day 26 Chat & SignalR (Server) 中後端已經準備好了。這邊開始來準備 Ionic 的部分。
這次先看結果，基本上就是一個先輸入使用者名稱，然後進入聊天室。

輸入使用者名稱頁面

建立 chat-user.page

chat-user.page.html

chat-user.page.scss

chat-user.page.ts
圖中 line 19-23 的 goChat() 這邊我想要特別提一下應該是關閉 Modal 後傳值到主頁面 (social.page.ts)。

聊天室

在 index.html 中加入 Jquery 跟 Jquery.signalR

social.page.html

social.page.scss

social.page.ts

基本上我遇到最大的困難應該是在 Angular 中引入其他的 JavaScript Library。 好險之前寫過 Day 24 Google Map 中宣告 declare var google: any; 學到這招。
line 4 中，我宣告了 declare var $: any; 直接叫用 JQuery。 會這樣改主要是比較簡單。

line 20-29 開啟在 ngOnInit() 中 開啟 chat-user.page Modal，讓使用者輸入使用者名稱。

line 30-33 主要就開始在建立連線。
這邊我是這種寫法

this.connection = $.hubConnection('http://192.168.1.102/BES/signalr', {
      useDefaultPath: false,
    });
this.chat = this.connection.createHubProxy('chatHub');

但是其實我在 Day 26 Chat & SignalR (Server) 最後驗證 SignalR 的地方是這樣寫的。

    <script src="~/signalr/hubs"></script>
    <script>
        $(function () {
            var chat = $.connection.chatHub;
            chat.client.sendMessage = function (name, message) {
                //...
            };
            
            $.connection.hub.start().done(function () {
                //...
            });
        });
    </script>

主要是因為 ~/signalr/hubs Signalr產生的js 幫我產生的 url 是 /BES/signalr 導致我一直吃到前端的網址，而不是後端的。

line 34-38 就是接受 ChatHub 傳來的資料，接著存在陣列中。
line 45-48 sendMessage() 主要就是去 call 後端 ChatHub 中的 Send 方法。
line 17 跟 line 39-41 主要是讓訊息超過視窗的時候，往底部捲動。

小結語
Day 26 Chat & SignalR (Server) 跟 Day 27 Chat & SignalR (Ionic) 這次的練習還蠻有成就感的。

再看一次結果XDD