How to Build Tinode WebRTC App with Go and JavaScript?

1     git clone https://github.com/tinode/chat.git
2     cd chat/server

1     go build

1     ./server

1     cd chat/webapp

1     npm install

1     npm start

1     pod install

1     cd chat/python

1     pip install -r requirements.txt

1     python main.py

1     git clone https://github.com/tinode/chat.git
2     cd chat/server

1     go build

1     {
2       "host": "localhost",
3       "port": 6060,
4       "tls": {
5         "enabled": false,
6         "cert_file": "",
7         "key_file": ""
8       },
9       "db": {
10         "type": "mysql",
11         "dsn": "username:password@tcp(127.0.0.1:3306)/tinode?charset=utf8mb4&parseTime=True&loc=Local"
12       }
13     }

1     ./server

1  package main
2
3  import (
4    "fmt"
5    "log"
6    "net/http"
7    "tinode/server"
8  )
9
10  func main() {
11    // Load configuration
12    config, err := server.LoadConfig("config.json")
13    if err != nil {
14      log.Fatal(err)
15    }
16
17    // Initialize the server
18    srv := server.NewServer(config)
19
20    // Start the server
21    fmt.Printf("Starting Tinode server on %s:%d\n", config.Host, config.Port)
22    if err := http.ListenAndServe(fmt.Sprintf("%s:%d", config.Host, config.Port), srv.Router); err != nil {
23      log.Fatal(err)
24    }
25  }

1  package server
2
3  import (
4    "encoding/json"
5    "io/ioutil"
6    "log"
7  )
8
9  type Config struct {
10    Host string `json:"host"`
11    Port int    `json:"port"`
12    TLS  struct {
13      Enabled  bool   `json:"enabled"`
14      CertFile string `json:"cert_file"`
15      KeyFile  string `json:"key_file"`
16    } `json:"tls"`
17    DB struct {
18      Type string `json:"type"`
19      DSN  string `json:"dsn"`
20    } `json:"db"`
21  }
22
23  func LoadConfig(file string) (*Config, error) {
24    data, err := ioutil.ReadFile(file)
25    if err != nil {
26      return nil, err
27    }
28    var config Config
29    if err := json.Unmarshal(data, &config); err != nil {
30      return nil, err
31    }
32    return &config, nil
33  }

1 - A message input box for typing new messages.
2 - A send button to submit messages.
3 - A display area for the chat history, showing sent and received messages.
4 - Options for attaching files, sending emojis, and other multimedia messages.

1     import React, { useState } from 'react';
2     import Tinode from 'tinode-sdk';
3
4     const Join = ({ onLogin }) => {
5       const [username, setUsername] = useState('');
6       const [password, setPassword] = useState('');
7
8       const handleLogin = async () => {
9         const tinode = new Tinode();
10         try {
11           await tinode.connect('wss://api.tinode.co');
12           await tinode.loginBasic(username, password);
13           onLogin(tinode);
14         } catch (err) {
15           console.error('Login failed', err);
16         }
17       };
18
19       return (
20         <div className="join-container">
21           <h2>Join Chat</h2>
22           <input
23             type="text"
24             placeholder="Username"
25             value={username}
26             onChange={(e) => setUsername(e.target.value)}
27           />
28           <input
29             type="password"
30             placeholder="Password"
31             value={password}
32             onChange={(e) => setPassword(e.target.value)}
33           />
34           <button onClick={handleLogin}>Login</button>
35         </div>
36       );
37     };
38
39     export default Join;

1     .join-container {
2       display: flex;
3       flex-direction: column;
4       align-items: center;
5       justify-content: center;
6       height: 100vh;
7     }
8
9     .join-container input {
10       margin: 10px;
11       padding: 10px;
12       font-size: 16px;
13     }
14
15     .join-container button {
16       padding: 10px 20px;
17       font-size: 16px;
18       cursor: pointer;
19     }

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

1     import UIKit
2     import TinodeSDK
3
4     class JoinViewController: UIViewController {
5       @IBOutlet weak var usernameTextField: UITextField!
6       @IBOutlet weak var passwordTextField: UITextField!
7
8       override func viewDidLoad() {
9         super.viewDidLoad()
10       }
11
12       @IBAction func loginButtonTapped(_ sender: UIButton) {
13         let tinode = Tinode()
14         tinode.connect().then {
15           return tinode.loginBasic(uname: self.usernameTextField.text!, password: self.passwordTextField.text!)
16         }.then { msg in
17           // Proceed to the chat screen
18           self.performSegue(withIdentifier: "showChat", sender: nil)
19         }.catch { err in
20           print("Login failed: \(err)")
21         }
22       }
23     }

1     package com.example.chatapp;
2
3     import android.content.Intent;
4     import android.os.Bundle;
5     import android.view.View;
6     import android.widget.EditText;
7     import android.widget.Toast;
8     import androidx.appcompat.app.AppCompatActivity;
9     import co.tinode.tinodesdk.Tinode;
10     import co.tinode.tinodesdk.model.ServerMessage;
11
12     public class JoinActivity extends AppCompatActivity {
13         private Tinode tinode;
14         private EditText usernameEditText;
15         private EditText passwordEditText;
16
17         @Override
18         protected void onCreate(Bundle savedInstanceState) {
19             super.onCreate(savedInstanceState);
20             setContentView(R.layout.activity_join);
21
22             tinode = new Tinode();
23             usernameEditText = findViewById(R.id.username);
24             passwordEditText = findViewById(R.id.password);
25         }
26
27         public void onLogin(View view) {
28             String username = usernameEditText.getText().toString();
29             String password = passwordEditText.getText().toString();
30
31             tinode.connect("wss://api.tinode.co").thenApply(ignored -> {
32                 return tinode.loginBasic(username, password);
33             }).thenAccept(msg -> {
34                 Intent intent = new Intent(JoinActivity.this, ChatActivity.class);
35                 startActivity(intent);
36                 finish();
37             }).exceptionally(e -> {
38                 runOnUiThread(() -> {
39                     Toast.makeText(JoinActivity.this, "Login failed: " + e.getMessage(), Toast.LENGTH_SHORT).show();
40                 });
41                 return null;
42             });
43         }
44     }

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         android:gravity="center"
6         android:padding="16dp">
7
8         <EditText
9             android:id="@+id/username"
10             android:layout_width="match_parent"
11             android:layout_height="wrap_content"
12             android:hint="Username" />
13
14         <EditText
15             android:id="@+id/password"
16             android:layout_width="match_parent"
17             android:layout_height="wrap_content"
18             android:hint="Password"
19             android:inputType="textPassword" />
20
21         <Button
22             android:layout_width="wrap_content"
23             android:layout_height="wrap_content"
24             android:text="Login"
25             android:onClick="onLogin" />
26     </LinearLayout>

1     BoxLayout:
2         orientation: 'vertical'
3         spacing: 10
4         padding: 50
5
6         TextInput:
7             id: username
8             hint_text: 'Username'
9
10         TextInput:
11             id: password
12             hint_text: 'Password'
13             password: True
14
15         Button:
16             text: 'Login'
17             on_press: app.login(username.text, password.text)

1     from kivy.app import App
2     from kivy.uix.boxlayout import BoxLayout
3     from tinode import Tinode
4
5     class JoinScreen(BoxLayout):
6         pass
7
8     class ChatApp(App):
9         def build(self):
10             return JoinScreen()
11
12         def login(self, username, password):
13             tinode = Tinode()
14             tinode.connect('wss://api.tinode.co').then(
15                 lambda _: tinode.login_basic(username, password)
16             ).then(
17                 lambda _: self.root.current = 'chat'
18             ).catch(
19                 lambda e: print(f"Login failed: {e}")
20             )
21
22     if __name__ == '__main__':
23         ChatApp().run()

1     import React, { useState, useEffect } from 'react';
2     import Tinode from 'tinode-sdk';
3
4     const Chat = ({ tinode }) => {
5       const [messages, setMessages] = useState([]);
6       const [message, setMessage] = useState('');
7
8       useEffect(() => {
9         const topic = tinode.getTopic('general');
10         topic.subscribe().then(() => {
11           topic.onData = (msg) => {
12             setMessages((prevMessages) => [...prevMessages, msg]);
13           };
14         });
15       }, [tinode]);
16
17       const sendMessage = () => {
18         const topic = tinode.getTopic('general');
19         topic.publishMessage(message);
20         setMessage('');
21       };
22
23       return (
24         <div className="chat-container">
25           <div className="messages">
26             {messages.map((msg, index) => (
27               <div key={index} className="message">
28                 {msg.content}
29               </div>
30             ))}
31           </div>
32           <div className="controls">
33             <input
34               type="text"
35               value={message}
36               onChange={(e) => setMessage(e.target.value)}
37               placeholder="Type a message..."
38             />
39             <button onClick={sendMessage}>Send</button>
40           </div>
41         </div>
42       );
43     };
44
45     export default Chat;

1     .chat-container {
2       display: flex;
3       flex-direction: column;
4       height: 100vh;
5     }
6
7     .messages {
8       flex: 1;
9       overflow-y: auto;
10       padding: 10px;
11     }
12
13     .message {
14       margin: 10px 0;
15       padding: 10px;
16       border-radius: 5px;
17       background-color: #f1f1f1;
18     }
19
20     .controls {
21       display: flex;
22       padding: 10px;
23       border-top: 1px solid #ddd;
24     }
25
26     .controls input {
27       flex: 1;
28       padding: 10px;
29       margin-right: 10px;
30       font-size: 16px;
31     }
32
33     .controls button {
34       padding: 10px 20px;
35       font-size: 16px;
36       cursor: pointer;
37     }

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

1     import UIKit
2     import TinodeSDK
3
4     class ChatViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
5       @IBOutlet weak var tableView: UITableView!
6       @IBOutlet weak var messageTextField: UITextField!
7
8       var tinode: Tinode!
9       var topic: DefaultComTopic!
10       var messages: [MsgServerData] = []
11
12       override func viewDidLoad() {
13         super.viewDidLoad()
14
15         tableView.dataSource = self
16         tableView.delegate = self
17
18         topic = tinode.getTopic(for: "general") as? DefaultComTopic
19         topic.subscribe().then {
20           self.topic.onData = { msg in
21             self.messages.append(msg)
22             self.tableView.reloadData()
23           }
24         }
25       }
26
27       @IBAction func sendMessage(_ sender: UIButton) {
28         let message = messageTextField.text!
29         topic.publishMessage(content: message)
30         messageTextField.text = ""
31       }
32
33       func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
34         return messages.count
35       }
36
37       func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
38         let cell = tableView.dequeueReusableCell(withIdentifier: "MessageCell", for: indexPath)
39         cell.textLabel?.text = messages[indexPath.row].content
40         return cell
41       }
42     }

1     package com.example.chatapp;
2
3     import android.os.Bundle;
4     import android.view.View;
5     import android.widget.EditText;
6     import android.widget.Toast;
7     import androidx.appcompat.app.AppCompatActivity;
8     import androidx.recyclerview.widget.LinearLayoutManager;
9     import androidx.recyclerview.widget.RecyclerView;
10     import java.util.ArrayList;
11     import java.util.List;
12     import co.tinode.tinodesdk.Tinode;
13     import co.tinode.tinodesdk.model.MsgServerData;
14
15     public class ChatActivity extends AppCompatActivity {
16         private Tinode tinode;
17         private EditText messageEditText;
18         private RecyclerView messagesRecyclerView;
19         private MessagesAdapter adapter;
20         private List<MsgServerData> messages;
21
22         @Override
23         protected void onCreate(Bundle savedInstanceState) {
24             super.onCreate(savedInstanceState);
25             setContentView(R.layout.activity_chat);
26
27             tinode = (Tinode) getIntent().getSerializableExtra("tinode");
28             messageEditText = findViewById(R.id.messageEditText);
29             messagesRecyclerView = findViewById(R.id.messagesRecyclerView);
30
31             messages = new ArrayList<>();
32             adapter = new MessagesAdapter(messages);
33             messagesRecyclerView.setLayoutManager(new LinearLayoutManager(this));
34             messagesRecyclerView.setAdapter(adapter);
35
36             Tinode.Topic topic = tinode.getTopic("general");
37             topic.subscribe().thenApply(ignored -> {
38                 topic.onData = msg -> {
39                     messages.add(msg);
40                     runOnUiThread(() -> adapter.notifyDataSetChanged());
41                 };
42                 return null;
43             }).exceptionally(e -> {
44                 runOnUiThread(() -> Toast.makeText(ChatActivity.this, "Subscription failed: " + e.getMessage(), Toast.LENGTH_SHORT).show());
45                 return null;
46             });
47         }
48
49         public void sendMessage(View view) {
50             String message = messageEditText.getText().toString();
51             Tinode.Topic topic = tinode.getTopic("general");
52             topic.publishMessage(message);
53             messageEditText.setText("");
54         }
55     }

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/messagesRecyclerView"
8             android:layout_width="match_parent"
9             android:layout_height="0dp"
10             android:layout_weight="1"/>
11
12         <LinearLayout
13             android:layout_width="match_parent"
14             android:layout_height="wrap_content"
15             android:orientation="horizontal"
16             android:padding="10dp">
17
18             <EditText
19                 android:id="@+id/messageEditText"
20                 android:layout_width="0dp"
21                 android:layout_height="wrap_content"
22                 android:layout_weight="1"
23                 android:hint="Type a message..." />
24
25             <Button
26                 android:layout_width="wrap_content"
27                 android:layout_height="wrap_content"
28                 android:text="Send"
29                 android:onClick="sendMessage" />
30         </LinearLayout>
31     </LinearLayout>

1     BoxLayout:
2         orientation: 'vertical'
3         spacing: 10
4         padding: 10
5
6         ScrollView:
7             id: messages
8             BoxLayout:
9                 id: message_container
10                 orientation: 'vertical'
11                 size_hint_y: None
12
13
14                 height: self.minimum_height
15
16         BoxLayout:
17             size_hint_y: None
18             height: '40dp'
19             TextInput:
20                 id: message_input
21                 hint_text: 'Type a message...'
22                 size_hint_x: 0.8
23             Button:
24                 text: 'Send'
25                 size_hint_x: 0.2
26                 on_press: app.send_message()

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 ChatScreen(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 ChatScreen()
16
17         def on_subscribe(self, *args):
18             self.topic.on_data = self.receive_message
19
20         def send_message(self):
21             message = self.root.ids.message_input.text
22             self.topic.publish_message(message)
23             self.root.ids.message_input.text = ''
24             self.add_message_to_ui(message, 'right')
25
26         def receive_message(self, msg):
27             self.add_message_to_ui(msg.content, 'left')
28
29         def add_message_to_ui(self, message, alignment):
30             label = Label(text=message, size_hint_y=None, height=40)
31             if alignment == 'right':
32                 label.halign = 'right'
33             self.root.ids.message_container.add_widget(label)
34
35     if __name__ == '__main__':
36         ChatApp().run()