Tinode WebRTC: Architecture, Call Flow, and Scaling Guide

1     import React, { useState, useEffect } from 'react';
2     import Tinode from 'tinode-sdk';
3
4     const Participants = ({ tinode }) => {
5       const [participants, setParticipants] = useState([]);
6
7       useEffect(() => {
8         const topic = tinode.getTopic('general');
9         topic.subscribe().then(() => {
10           topic.onMetaDesc = (desc) => {
11             setParticipants(desc.sub);
12           };
13         });
14       }, [tinode]);
15
16       return (
17         <div className="participants-container">
18           <h3>Participants</h3>
19           <ul>
20             {participants.map((participant, index) => (
21               <li key={index}>{participant.user}</li>
22             ))}
23           </ul>
24         </div>
25       );
26     };
27
28     export default Participants;

1     .participants-container {
2       border-left: 1px solid #ddd;
3       padding: 10px;
4     }
5
6     .participants-container h3 {
7       margin-top: 0;
8     }
9
10     .participants-container ul {
11       list-style: none;
12       padding: 0;
13     }
14
15     .participants-container li {
16       padding: 5px 0;
17     }

1     import React, { useState } from 'react';
2     import Join from './components/Join';
3     import Chat from './components/Chat';
4     import Participants from './components/Participants';
5
6     const App = () => {
7       const [tinode, setTinode] = useState(null);
8
9       return (
10         <div className="App">
11           {!tinode ? (
12             <Join onLogin={setTinode} />
13           ) : (
14             <div className="chat-container">
15               <Chat tinode={tinode} />
16               <Participants tinode={tinode} />
17             </div>
18           )}
19         </div>
20       );
21     };
22
23     export default App;

1     import UIKit
2     import TinodeSDK
3
4     class ParticipantsViewController: UIViewController, UITableViewDataSource {
5       @IBOutlet weak var tableView: UITableView!
6
7       var tinode: Tinode!
8       var topic: DefaultComTopic!
9       var participants: [Subscription<TheType>] = []
10
11       override func viewDidLoad() {
12         super.viewDidLoad()
13         tableView.dataSource = self
14
15         topic = tinode.getTopic(for: "general") as? DefaultComTopic
16         topic.subscribe().then {
17           self.topic.onMetaDesc = { desc in
18             self.participants = desc.sub
19             self.tableView.reloadData()
20           }
21         }
22       }
23
24       func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
25         return participants.count
26       }
27
28       func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
29         let cell = tableView.dequeueReusableCell(withIdentifier: "ParticipantCell", for: indexPath)
30         cell.textLabel?.text = participants[indexPath.row].user
31         return cell
32       }
33     }

1     package com.example.chatapp;
2
3     import android.os.Bundle;
4     import androidx.appcompat.app.AppCompatActivity;
5     import androidx.recyclerview.widget.LinearLayoutManager;
6     import androidx.recyclerview.widget.RecyclerView;
7     import java.util.ArrayList;
8     import java.util.List;
9     import co.tinode.tinodesdk.Tinode;
10     import co.tinode.tinodesdk.model.Subscription;
11
12     public class ParticipantsActivity extends AppCompatActivity {
13         private Tinode tinode;
14         private RecyclerView participantsRecyclerView;
15         private ParticipantsAdapter adapter;
16         private List<Subscription> participants;
17
18         @Override
19         protected void onCreate(Bundle savedInstanceState) {
20             super.onCreate(savedInstanceState);
21             setContentView(R.layout.activity_participants);
22
23             tinode = (Tinode) getIntent().getSerializableExtra("tinode");
24             participantsRecyclerView = findViewById(R.id.participantsRecyclerView);
25
26             participants = new ArrayList<>();
27             adapter = new ParticipantsAdapter(participants);
28             participantsRecyclerView.setLayoutManager(new LinearLayoutManager(this));
29             participantsRecyclerView.setAdapter(adapter);
30
31             Tinode.Topic topic = tinode.getTopic("general");
32             topic.subscribe().thenApply(ignored -> {
33                 topic.onMetaDesc = desc -> {
34                     participants.addAll(desc.sub);
35                     runOnUiThread(() -> adapter.notifyDataSetChanged());
36                 };
37                 return null;
38             }).exceptionally(e -> {
39                 runOnUiThread(() -> Toast.makeText(ParticipantsActivity.this, "Subscription failed: " + e.getMessage(), Toast.LENGTH_SHORT).show());
40                 return null;
41             });
42         }
43     }

1     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2         android:layout_width="match_parent"
3         android:layout_height="match_parent"
4         android:orientation="vertical">
5
6         <androidx.recyclerview.widget.RecyclerView
7             android:id="@+id/participantsRecyclerView"
8             android:layout_width="match_parent"
9             android:layout_height="match_parent"/>
10     </LinearLayout>

1     package com.example.chatapp;
2
3     import android.view.LayoutInflater;
4     import android.view.View;
5     import android.view.ViewGroup;
6     import android.widget.TextView;
7     import androidx.annotation.NonNull;
8     import androidx.recyclerview.widget.RecyclerView;
9     import java.util.List;
10     import co.tinode.tinodesdk.model.Subscription;
11
12     public class ParticipantsAdapter extends RecyclerView.Adapter<ParticipantsAdapter.ParticipantViewHolder> {
13         private List<Subscription> participants;
14
15         public ParticipantsAdapter(List<Subscription> participants) {
16             this.participants = participants;
17         }
18
19         @NonNull
20         @Override
21         public ParticipantViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
22             View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_participant, parent, false);
23             return new ParticipantViewHolder(view);
24         }
25
26         @Override
27         public void onBindViewHolder(@NonNull ParticipantViewHolder holder, int position) {
28             Subscription participant = participants.get(position);
29             holder.usernameTextView.setText(participant.user);
30         }
31
32         @Override
33         public int getItemCount() {
34             return participants.size();
35         }
36
37         public static class ParticipantViewHolder extends RecyclerView.ViewHolder {
38             TextView usernameTextView;
39
40             public ParticipantViewHolder(@NonNull View itemView) {
41                 super(itemView);
42                 usernameTextView = itemView.findViewById(R.id.usernameTextView);
43             }
44         }
45     }

1     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2         android:layout_width="match_parent"
3         android:layout_height="wrap_content"
4         android:orientation="horizontal"
5         android:padding="10dp">
6
7         <TextView
8             android:id="@+id/usernameTextView"
9             android:layout_width="wrap_content"
10             android:layout_height="wrap_content"
11             android:textSize="16sp"/>
12     </LinearLayout>

1     BoxLayout:
2         orientation: 'vertical'
3         spacing: 10
4         padding: 10
5
6         Label:
7             text: 'Participants'
8             size_hint_y: None
9             height: '40dp'
10
11         ScrollView:
12             BoxLayout:
13                 id: participants_container
14                 orientation: 'vertical'
15                 size_hint_y: None
16                 height: self.minimum_height

1     from kivy.app import App
2     from kivy.uix.boxlayout import BoxLayout
3     from kivy.uix.label import Label
4     from tinode import Tinode
5
6     class ParticipantsScreen(BoxLayout):
7         pass
8
9     class ChatApp(App):
10         def build(self):
11             self.tinode = Tinode()
12             self.tinode.connect('wss://api.tinode.co')
13             self.topic = self.tinode.get_topic('general')
14             self.topic.subscribe().then(self.on_subscribe)
15             return ParticipantsScreen()
16
17         def on_subscribe(self, *args):
18             self.topic.on_meta_desc = self.receive_participants
19
20         def receive_participants(self, desc):
21             participants = desc['sub']
22             for participant in participants:
23                 self.add_participant_to_ui(participant['user'])
24
25         def add_participant_to_ui(self, username):
26             label = Label(text=username, size_hint_y=None, height=40)
27             self.root.ids.participants_container.add_widget(label)
28
29     if __name__ == '__main__':
30         ChatApp().run()

1     npm start

1     python main.py