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