Ölçeklenebilir ve güvenilir bir sohbet uygulaması oluşturmak için JavaScript SDK kullanarak Twilio sohbetinin gücünü keşfedelim.

Bu makale, bir sohbet uygulamasını Twilio'nun konuşma API'si ile açısal olarak entegre etmenize yardımcı olacaktır, ancak mesele bu değil; burada bahsedildiği gibi daha fazla kullanım durumu veya örneği bulabilirsiniz .

Şimdi aynısını göstermek için örnek bir sohbet uygulaması başlatalım ve oluşturalım.

Önkoşullar

• Düğüm J'ler
• Paket yöneticisi: npm
• Aynısını kullanmaya başlamak için bir Ücretsiz Twilio hesabı oluşturun
• Açısal CLI

Önce Backend kodunu ayarlayalım

Yeni bir NodeJS projesi olan 'chat-backend' oluşturmak için aşağıda belirtilen komutları çalıştırın.

mkdir chat-backend
cd chat-backend
npm init

npm i express
npm i dotenv
npm i twilio

TWILIO_ACCOUNT_SID=
TWILIO_AUTH_TOKEN=
TWILIO_SERVICE_SID=
TWILIO_API_KEY=
TWILIO_API_SECRET=

index.js

require('dotenv').config();
const express = require("express");
var app = express();
const chat = require('./chat');

app.use(function(req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
    res.setHeader('Access-Control-Allow-Credentials', true);
    next();
});

app.get("/", function (request, response) {
    response.send("Hello World!");
})

app.get("/getToken", function (request, response) {
    let token = chat.getToken(request.query.userName);
   response.send(JSON.stringify(token));
})

app.listen(3000, function () {
    console.log("Started application on port %d", 3000);
});

const accountSid = process.env.TWILIO_ACCOUNT_SID;
const authToken = process.env.TWILIO_AUTH_TOKEN;
const serviceSid = process.env.TWILIO_SERVICE_SID;
const apiKey = process.env.TWILIO_API_KEY;
const apiSecret = process.env.TWILIO_API_SECRET;
const client = require('twilio')(accountSid, authToken);

// Create a twilio access token
function getToken(identity) {
    const AccessToken = require('twilio').jwt.AccessToken;
    const ChatGrant = AccessToken.ChatGrant;

    const chatGrant = new ChatGrant({
        serviceSid: serviceSid,
    });
    const token = new AccessToken(
        accountSid,
        apiKey,
        apiSecret,
        { 
            identity: identity,
            ttl: 3600
        }
    );

    token.addGrant(chatGrant); 
    return token.toJwt();
}

module.exports = {getToken};

npm start

angular-cli ile yeni bir açısal proje oluşturmak için aşağıda belirtilen komutları çalıştırın

ng new twilio-chat-example
cd twilio-chat-example
ng serve

npm install --save @twilio/conversations

ng g c chats

connectTwilio() {
    this.isLoading = true;
    this.getToken().subscribe(token => {
      this.client = new Client(token);
      this.isLoading = false;
      this.listenToEvents();
    }, error => console.log(error));
  }

Oluşturulan belirteci yenilemek ve Twilio hizmetleriyle çalışmaya devam etmek için tokenAboutToExpire & tokenExpired olayını dinleyin .

listenToEvents() {
    this.client.on('initialized', () => {
      console.log('Client initialized');
      this.fetchUserChats();
    });

    this.client.on('initFailed', (error: any) => {
      console.log('Client initialization failed: ', error);
    });

    this.client.on('connectionStateChanged', (state: ConnectionState) => {
      console.log('Connection state change: ', state);
    });

    this.client.on('connectionError', (error: any) => {
      console.log('Connection error: ', error);
    });

    this.client.on('tokenAboutToExpire', () => {
      console.log('About to expire');
      this.getToken().subscribe(async (token) => {
        this.client = await this.client.updateToken(token);
      })
    });

    this.client.on('tokenExpired', () => {
      console.log('Token expired');
      this.client.removeAllListeners();
      this.connectTwilio();
    });

    this.client.on('conversationAdded', (conv: Conversation) => {
      setTimeout(async () => {
        if (conv.dateCreated && conv.dateCreated > this.currentTime) {
          console.log('Conversation added', conv);
          await conv.setAllMessagesUnread();
          let newChat = {
            chat: conv,
            unreadCount: 0,
            lastMessage: ''
          }
          this.chatList = [newChat,...this.chatList];
        }
      }, 500);
    });

    this.client.on('messageAdded', async (msg: Message) => {
      console.log('Message added', msg);
      if (this.currentConversation && this.currentConversation.sid === msg.conversation.sid) {
        this.messages.push(msg);
        await this.currentConversation.updateLastReadMessageIndex(msg.index);
        this.chatList = this.chatList.map(el => {
          if(el.chat.sid === this.currentConversation.sid){
            el.lastMessage = msg.body;
          }
          return el;
        });
      } else {
        this.chatList = this.chatList.map(el => {
          if(el.chat.sid === msg.conversation.sid){
            el.lastMessage = msg.body;
            el.unreadCount++;
          }
          return el;
        });
      }
    });

    this.client.on('typingStarted', (user: Participant) => {
      console.log('typing..', user);
      if (user.conversation.sid === this.currentConversation.sid) this.isTyping = true;
    });

    this.client.on('typingEnded', (user: Participant) => {
      console.log('typing end..', user);
      if (user.conversation.sid === this.currentConversation.sid) this.isTyping = false;
    });
  }

fetchUserChats() {
    this.isLoading = true;
    this.client.getSubscribedConversations().then(convs => {
      let chats:any = [...convs.items];
      chats.forEach( async (chat:Conversation) => {
        let obj = {
          chat: chat,
          unreadCount: await chat.getUnreadMessagesCount(),
          lastMessage: (await chat.getMessages()).items[chat.lastReadMessageIndex || 0].body
        }
        this.chatList.push(obj);
      })
      this.isLoading = false;
    }).catch(error => console.log(error));
  }

newChat() {
    this.isLoading = true;
    this.client.getUser(this.newUser).then(res => {
      this.client.createConversation({
        friendlyName: `${this.newUser}-${this.userName}`,
      }).then(async (channel: Conversation) => {
        channel.join().then(async () => {
          await channel.setAllMessagesUnread();
          channel.add(this.newUser).then(() => {
            this.currentConversation = channel;
            this.openChat(channel);
            this.scrollToBottom();
            this.isLoading = false;
          })
        });
      }).catch(error => console.log(error));
    }).catch(err => {
      this.isLoading = false;
      this.error = 'User not found in Twilio';
      setTimeout(() => {
        this.error = null;
      }, 2000);
      this.newUser = null;
    });
  }

sendMessage() {
    this.currentConversation.sendMessage(this.message).then(result => {
      this.message = '';
    }).catch(err => console.log(err));
  }

Not: getMessages bir seferde 30 öğe döndüreceğinden ve kullanıcının konuşmalarını almak için benzerini uygulayacağından, kaydırma üzerine yük mesajlarını uygulayın .

fetchMessages(skip?: number) {
    this.isLoading = true;
    this.currentConversation.getMessages(30, skip).then(async (result) => {
      this.messages = [...result.items, ...this.messages];
      if (!skip) {
        let resetTo = this.messages.length >= 1 ? this.messages[this.messages.length - 1].index : 0;
        await this.currentConversation.updateLastReadMessageIndex(resetTo);
        this.chatList = this.chatList.map( el => {
          if(el.chat.sid == this.currentConversation.sid){
            el.unreadCount = 0;
          }
          return el;
        })
      }
      this.isLoading = false;
    }).catch(error => {
      this.isLoading = false;
      console.log(error)
    });
  }

Bu, Twilio konuşmalarıyla bir sohbet uygulaması oluşturmaya ilişkin temel bir örnektir. Medya eklemek, sohbetleri kapatmak (konuşma durumunu yönetmek), ulaşılabilirlik göstergeleri, harici kanallarla çalışmak vb. için resmi belgesinde başka şeylere göz atabilirsiniz.

Hatırlanacak şeyler

• Yanlış davranışlardan kaçınmak için aynı etkinlik için birden çok dinleyici eklemeyin
• Kullanım durumunuza göre mantıksal bir akış oluşturmadan önce Twilio konuşma sınırlarını bir kez kontrol edin.
• Ücretli bir hizmet olduğu için Twilio'nun fiyatlandırma planına bir göz atın.

Referanslar

Belgeler:https://www.twilio.com/docs/conversations
Örnek: Verilen GitHub örnek bağlantısındaki örnek videoyu inceleyin
(Ön uç)https://github.com/Khushbu-2112/Twilio-chat-frontend-Example
(Arka uç)https://github.com/Khushbu-2112/Twilio-chat-backend-Example