├── .vscode
    └── settings.json
├── base
    ├── __init__.py
    ├── __pycache__
    │   ├── __init__.cpython-310.pyc
    │   ├── admin.cpython-310.pyc
    │   ├── apps.cpython-310.pyc
    │   ├── models.cpython-310.pyc
    │   ├── serializers.cpython-310.pyc
    │   ├── urls.cpython-310.pyc
    │   └── views.cpython-310.pyc
    ├── admin.py
    ├── apps.py
    ├── migrations
    │   ├── 0001_initial.py
    │   ├── 0002_post_sender.py
    │   ├── __init__.py
    │   └── __pycache__
    │   │   ├── 0001_initial.cpython-310.pyc
    │   │   ├── 0002_post_sender.cpython-310.pyc
    │   │   └── __init__.cpython-310.pyc
    ├── models.py
    ├── serializers.py
    ├── tests.py
    ├── urls.py
    └── views.py
├── db.sqlite3
├── manage.py
├── preview.png
├── public_chat
    ├── __init__.py
    ├── __pycache__
    │   ├── __init__.cpython-310.pyc
    │   ├── settings.cpython-310.pyc
    │   ├── urls.cpython-310.pyc
    │   └── wsgi.cpython-310.pyc
    ├── asgi.py
    ├── settings.py
    ├── urls.py
    └── wsgi.py
├── readme.md
├── requirements.txt
├── static
    ├── js
    │   └── agora-rtm.js
    └── styles
    │   └── main.css
└── templates
    ├── feed.html
    ├── login.html
    └── main.html


/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "python.pythonPath": "env/bin/python"
3 | }


--------------------------------------------------------------------------------
/base/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/realtime_chat_django/fd02ded6f111e242db600ca13fe1e09e1f31df66/base/__init__.py


--------------------------------------------------------------------------------
/base/__pycache__/__init__.cpython-310.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/realtime_chat_django/fd02ded6f111e242db600ca13fe1e09e1f31df66/base/__pycache__/__init__.cpython-310.pyc


--------------------------------------------------------------------------------
/base/__pycache__/admin.cpython-310.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/realtime_chat_django/fd02ded6f111e242db600ca13fe1e09e1f31df66/base/__pycache__/admin.cpython-310.pyc


--------------------------------------------------------------------------------
/base/__pycache__/apps.cpython-310.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/realtime_chat_django/fd02ded6f111e242db600ca13fe1e09e1f31df66/base/__pycache__/apps.cpython-310.pyc


--------------------------------------------------------------------------------
/base/__pycache__/models.cpython-310.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/realtime_chat_django/fd02ded6f111e242db600ca13fe1e09e1f31df66/base/__pycache__/models.cpython-310.pyc


--------------------------------------------------------------------------------
/base/__pycache__/serializers.cpython-310.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/realtime_chat_django/fd02ded6f111e242db600ca13fe1e09e1f31df66/base/__pycache__/serializers.cpython-310.pyc


--------------------------------------------------------------------------------
/base/__pycache__/urls.cpython-310.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/realtime_chat_django/fd02ded6f111e242db600ca13fe1e09e1f31df66/base/__pycache__/urls.cpython-310.pyc


--------------------------------------------------------------------------------
/base/__pycache__/views.cpython-310.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/realtime_chat_django/fd02ded6f111e242db600ca13fe1e09e1f31df66/base/__pycache__/views.cpython-310.pyc


--------------------------------------------------------------------------------
/base/admin.py:
--------------------------------------------------------------------------------
1 | from django.contrib import admin
2 | from .models import Post
3 | # Register your models here.
4 | 
5 | admin.site.register(Post)
6 | 


--------------------------------------------------------------------------------
/base/apps.py:
--------------------------------------------------------------------------------
1 | from django.apps import AppConfig
2 | 
3 | 
4 | class BaseConfig(AppConfig):
5 |     default_auto_field = 'django.db.models.BigAutoField'
6 |     name = 'base'
7 | 


--------------------------------------------------------------------------------
/base/migrations/0001_initial.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 4.1 on 2022-09-21 17:29
 2 | 
 3 | from django.db import migrations, models
 4 | 
 5 | 
 6 | class Migration(migrations.Migration):
 7 | 
 8 |     initial = True
 9 | 
10 |     dependencies = [
11 |     ]
12 | 
13 |     operations = [
14 |         migrations.CreateModel(
15 |             name='Post',
16 |             fields=[
17 |                 ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
18 |                 ('body', models.CharField(max_length=250)),
19 |                 ('created', models.DateTimeField(auto_now_add=True)),
20 |             ],
21 |         ),
22 |     ]
23 | 


--------------------------------------------------------------------------------
/base/migrations/0002_post_sender.py:
--------------------------------------------------------------------------------
 1 | # Generated by Django 4.1 on 2022-09-21 19:27
 2 | 
 3 | from django.db import migrations, models
 4 | 
 5 | 
 6 | class Migration(migrations.Migration):
 7 | 
 8 |     dependencies = [
 9 |         ('base', '0001_initial'),
10 |     ]
11 | 
12 |     operations = [
13 |         migrations.AddField(
14 |             model_name='post',
15 |             name='sender',
16 |             field=models.CharField(max_length=200, null=True),
17 |         ),
18 |     ]
19 | 


--------------------------------------------------------------------------------
/base/migrations/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/realtime_chat_django/fd02ded6f111e242db600ca13fe1e09e1f31df66/base/migrations/__init__.py


--------------------------------------------------------------------------------
/base/migrations/__pycache__/0001_initial.cpython-310.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/realtime_chat_django/fd02ded6f111e242db600ca13fe1e09e1f31df66/base/migrations/__pycache__/0001_initial.cpython-310.pyc


--------------------------------------------------------------------------------
/base/migrations/__pycache__/0002_post_sender.cpython-310.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/realtime_chat_django/fd02ded6f111e242db600ca13fe1e09e1f31df66/base/migrations/__pycache__/0002_post_sender.cpython-310.pyc


--------------------------------------------------------------------------------
/base/migrations/__pycache__/__init__.cpython-310.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/realtime_chat_django/fd02ded6f111e242db600ca13fe1e09e1f31df66/base/migrations/__pycache__/__init__.cpython-310.pyc


--------------------------------------------------------------------------------
/base/models.py:
--------------------------------------------------------------------------------
 1 | from django.db import models
 2 | 
 3 | # Create your models here.
 4 | 
 5 | 
 6 | class Post(models.Model):
 7 |     sender = models.CharField(max_length=200, null=True) 
 8 |     body = models.CharField(max_length=250)
 9 |     created = models.DateTimeField(auto_now_add=True)
10 | 
11 |     def __str__(self):
12 |         return self.body[0:50]


--------------------------------------------------------------------------------
/base/serializers.py:
--------------------------------------------------------------------------------
1 | from rest_framework.serializers import ModelSerializer 
2 | from .models import Post
3 | 
4 | class PostSerializer(ModelSerializer):
5 |     class Meta:
6 |         model = Post
7 |         fields = '__all__'
8 | 


--------------------------------------------------------------------------------
/base/tests.py:
--------------------------------------------------------------------------------
1 | from django.test import TestCase
2 | 
3 | # Create your tests here.
4 | 


--------------------------------------------------------------------------------
/base/urls.py:
--------------------------------------------------------------------------------
1 | from django.urls import path 
2 | from . import views
3 | 
4 | urlpatterns = [
5 |     path('', views.public_feed, name="feed"),
6 |     path('register/', views.register, name="register"),
7 | 
8 |     path('add/', views.add_post)
9 | ]


--------------------------------------------------------------------------------
/base/views.py:
--------------------------------------------------------------------------------
 1 | from django.shortcuts import render
 2 | from rest_framework.decorators import api_view
 3 | from rest_framework.response import Response
 4 | 
 5 | 
 6 | from .models import Post
 7 | from .serializers import PostSerializer
 8 | # Create your views here.
 9 | 
10 | def register(request):
11 |     return render(request, 'login.html')
12 | 
13 | def public_feed(request):
14 |     posts = Post.objects.all().order_by('-created')
15 | 
16 |     context = {'posts':posts}
17 |     return render(request, 'feed.html', context)
18 | 
19 | @api_view(['POST'])
20 | def add_post(request):
21 |     data = request.data 
22 |     post = Post.objects.create(
23 |         sender=data['sender'],
24 |         body=data['body']
25 |     )
26 |     serializer  = PostSerializer(post, many=False)
27 |     return Response(serializer.data)


--------------------------------------------------------------------------------
/db.sqlite3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/realtime_chat_django/fd02ded6f111e242db600ca13fe1e09e1f31df66/db.sqlite3


--------------------------------------------------------------------------------
/manage.py:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env python
 2 | """Django's command-line utility for administrative tasks."""
 3 | import os
 4 | import sys
 5 | 
 6 | 
 7 | def main():
 8 |     """Run administrative tasks."""
 9 |     os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'public_chat.settings')
10 |     try:
11 |         from django.core.management import execute_from_command_line
12 |     except ImportError as exc:
13 |         raise ImportError(
14 |             "Couldn't import Django. Are you sure it's installed and "
15 |             "available on your PYTHONPATH environment variable? Did you "
16 |             "forget to activate a virtual environment?"
17 |         ) from exc
18 |     execute_from_command_line(sys.argv)
19 | 
20 | 
21 | if __name__ == '__main__':
22 |     main()
23 | 


--------------------------------------------------------------------------------
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/realtime_chat_django/fd02ded6f111e242db600ca13fe1e09e1f31df66/preview.png


--------------------------------------------------------------------------------
/public_chat/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/realtime_chat_django/fd02ded6f111e242db600ca13fe1e09e1f31df66/public_chat/__init__.py


--------------------------------------------------------------------------------
/public_chat/__pycache__/__init__.cpython-310.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/realtime_chat_django/fd02ded6f111e242db600ca13fe1e09e1f31df66/public_chat/__pycache__/__init__.cpython-310.pyc


--------------------------------------------------------------------------------
/public_chat/__pycache__/settings.cpython-310.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/realtime_chat_django/fd02ded6f111e242db600ca13fe1e09e1f31df66/public_chat/__pycache__/settings.cpython-310.pyc


--------------------------------------------------------------------------------
/public_chat/__pycache__/urls.cpython-310.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/realtime_chat_django/fd02ded6f111e242db600ca13fe1e09e1f31df66/public_chat/__pycache__/urls.cpython-310.pyc


--------------------------------------------------------------------------------
/public_chat/__pycache__/wsgi.cpython-310.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/divanov11/realtime_chat_django/fd02ded6f111e242db600ca13fe1e09e1f31df66/public_chat/__pycache__/wsgi.cpython-310.pyc


--------------------------------------------------------------------------------
/public_chat/asgi.py:
--------------------------------------------------------------------------------
 1 | """
 2 | ASGI config for public_chat project.
 3 | 
 4 | It exposes the ASGI callable as a module-level variable named ``application``.
 5 | 
 6 | For more information on this file, see
 7 | https://docs.djangoproject.com/en/4.1/howto/deployment/asgi/
 8 | """
 9 | 
10 | import os
11 | 
12 | from django.core.asgi import get_asgi_application
13 | 
14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'public_chat.settings')
15 | 
16 | application = get_asgi_application()
17 | 


--------------------------------------------------------------------------------
/public_chat/settings.py:
--------------------------------------------------------------------------------
  1 | """
  2 | Django settings for public_chat project.
  3 | 
  4 | Generated by 'django-admin startproject' using Django 4.1.
  5 | 
  6 | For more information on this file, see
  7 | https://docs.djangoproject.com/en/4.1/topics/settings/
  8 | 
  9 | For the full list of settings and their values, see
 10 | https://docs.djangoproject.com/en/4.1/ref/settings/
 11 | """
 12 | 
 13 | from pathlib import Path
 14 | 
 15 | # Build paths inside the project like this: BASE_DIR / 'subdir'.
 16 | BASE_DIR = Path(__file__).resolve().parent.parent
 17 | 
 18 | 
 19 | # Quick-start development settings - unsuitable for production
 20 | # See https://docs.djangoproject.com/en/4.1/howto/deployment/checklist/
 21 | 
 22 | # SECURITY WARNING: keep the secret key used in production secret!
 23 | SECRET_KEY = 'django-insecure-y^&4!sd@_6r==aw6x9f_rge23dh9adsboy#s*hg4s&7y8zx=n+'
 24 | 
 25 | # SECURITY WARNING: don't run with debug turned on in production!
 26 | DEBUG = True
 27 | 
 28 | ALLOWED_HOSTS = []
 29 | 
 30 | 
 31 | # Application definition
 32 | 
 33 | INSTALLED_APPS = [
 34 |     'django.contrib.admin',
 35 |     'django.contrib.auth',
 36 |     'django.contrib.contenttypes',
 37 |     'django.contrib.sessions',
 38 |     'django.contrib.messages',
 39 |     'django.contrib.staticfiles',
 40 | 
 41 |     'rest_framework',
 42 | 
 43 |     'base',
 44 | ]
 45 | 
 46 | REST_FRAMEWORK = {
 47 |     'DEFAULT_AUTHENTICATION_CLASSES': (
 48 |         'rest_framework_simplejwt.authentication.JWTAuthentication',
 49 |     )
 50 | }
 51 | 
 52 | MIDDLEWARE = [
 53 |     'django.middleware.security.SecurityMiddleware',
 54 |     'django.contrib.sessions.middleware.SessionMiddleware',
 55 |     'django.middleware.common.CommonMiddleware',
 56 |     'django.middleware.csrf.CsrfViewMiddleware',
 57 |     'django.contrib.auth.middleware.AuthenticationMiddleware',
 58 |     'django.contrib.messages.middleware.MessageMiddleware',
 59 |     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 60 | ]
 61 | 
 62 | ROOT_URLCONF = 'public_chat.urls'
 63 | 
 64 | TEMPLATES = [
 65 |     {
 66 |         'BACKEND': 'django.template.backends.django.DjangoTemplates',
 67 |         'DIRS': [
 68 |             BASE_DIR / 'templates'
 69 |         ],
 70 |         'APP_DIRS': True,
 71 |         'OPTIONS': {
 72 |             'context_processors': [
 73 |                 'django.template.context_processors.debug',
 74 |                 'django.template.context_processors.request',
 75 |                 'django.contrib.auth.context_processors.auth',
 76 |                 'django.contrib.messages.context_processors.messages',
 77 |             ],
 78 |         },
 79 |     },
 80 | ]
 81 | 
 82 | WSGI_APPLICATION = 'public_chat.wsgi.application'
 83 | 
 84 | 
 85 | # Database
 86 | # https://docs.djangoproject.com/en/4.1/ref/settings/#databases
 87 | 
 88 | DATABASES = {
 89 |     'default': {
 90 |         'ENGINE': 'django.db.backends.sqlite3',
 91 |         'NAME': BASE_DIR / 'db.sqlite3',
 92 |     }
 93 | }
 94 | 
 95 | 
 96 | # Password validation
 97 | # https://docs.djangoproject.com/en/4.1/ref/settings/#auth-password-validators
 98 | 
 99 | AUTH_PASSWORD_VALIDATORS = [
100 |     {
101 |         'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
102 |     },
103 |     {
104 |         'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
105 |     },
106 |     {
107 |         'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
108 |     },
109 |     {
110 |         'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
111 |     },
112 | ]
113 | 
114 | 
115 | # Internationalization
116 | # https://docs.djangoproject.com/en/4.1/topics/i18n/
117 | 
118 | LANGUAGE_CODE = 'en-us'
119 | 
120 | TIME_ZONE = 'UTC'
121 | 
122 | USE_I18N = True
123 | 
124 | USE_TZ = True
125 | 
126 | 
127 | # Static files (CSS, JavaScript, Images)
128 | # https://docs.djangoproject.com/en/4.1/howto/static-files/
129 | 
130 | STATIC_URL = 'static/'
131 | 
132 | 
133 | STATICFILES_DIRS = [
134 |     BASE_DIR / 'static'
135 | ]
136 | 
137 | # Default primary key field type
138 | # https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field
139 | 
140 | DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
141 | 


--------------------------------------------------------------------------------
/public_chat/urls.py:
--------------------------------------------------------------------------------
 1 | """public_chat URL Configuration
 2 | 
 3 | The `urlpatterns` list routes URLs to views. For more information please see:
 4 |     https://docs.djangoproject.com/en/4.1/topics/http/urls/
 5 | Examples:
 6 | Function views
 7 |     1. Add an import:  from my_app import views
 8 |     2. Add a URL to urlpatterns:  path('', views.home, name='home')
 9 | Class-based views
10 |     1. Add an import:  from other_app.views import Home
11 |     2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
12 | Including another URLconf
13 |     1. Import the include() function: from django.urls import include, path
14 |     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
15 | """
16 | from django.contrib import admin
17 | from django.urls import path, include
18 | 
19 | urlpatterns = [
20 |     path('admin/', admin.site.urls),
21 |     path('', include('base.urls'))
22 | ]
23 | 


--------------------------------------------------------------------------------
/public_chat/wsgi.py:
--------------------------------------------------------------------------------
 1 | """
 2 | WSGI config for public_chat project.
 3 | 
 4 | It exposes the WSGI callable as a module-level variable named ``application``.
 5 | 
 6 | For more information on this file, see
 7 | https://docs.djangoproject.com/en/4.1/howto/deployment/wsgi/
 8 | """
 9 | 
10 | import os
11 | 
12 | from django.core.wsgi import get_wsgi_application
13 | 
14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'public_chat.settings')
15 | 
16 | application = get_wsgi_application()
17 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # Django Real Time Chat App
 2 | 
 3 | Basic chat app with public feed. Real time features added with Agora SDK.
 4 | 
 5 | Watch full tutorial <a href="https://youtu.be/2_mgyBD8dKc" target="_blank">Here</a>
 6 | 
 7 | ![](preview.png)
 8 | 
 9 | ### Getting Started
10 | 
11 | 
12 | 1. `git clone https://github.com/divanov11/realtime_chat_django`
13 | 2. `pip install -r requirements.txt`
14 | 3. Create an app from your account on agora.io and get your `APP ID`. 
15 | 
16 | > Note: Make sure to select "App ID only" for the authentication mechanism when creating your app in the Agora console
17 | 4. Replace the `APP_ID` value inside of `feed.html`
18 | 
19 | ```js
20 | const APP_ID = "YOU APP ID HERE"
21 | ```
22 | 
23 | 5. `python manage.py runserver`
24 | 


--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
1 | asgiref==3.5.2
2 | Django==4.1.1
3 | djangorestframework==3.13.1
4 | djangorestframework-simplejwt==5.2.0
5 | PyJWT==2.5.0
6 | pytz==2022.2.1
7 | sqlparse==0.4.2
8 | 


--------------------------------------------------------------------------------
/static/styles/main.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Kurale&display=swap');
 2 | 
 3 | *{
 4 |     font-family: 'Kurale', serif;
 5 | }
 6 | 
 7 | button{
 8 |     border:none;
 9 |     background-color: #24a0ed;
10 |     font-size: 18px;
11 |     color: #fff;
12 |     border-radius: 5px;
13 |     padding: 10px 20px;
14 |     margin: 1em;
15 | }
16 | 
17 | .main--container{
18 |     width: 600px;
19 |     margin: 0 auto;
20 | }
21 | 
22 | #post_form input{
23 |     width: 100%;
24 |     height: 50px;
25 |     font-size: 18px;
26 | }
27 | 
28 | .post-wrapper{
29 |     margin-top: 2em;
30 |     margin-bottom: 2em;
31 |     line-height: 1em;
32 |     
33 | }
34 | 
35 | .post__body{
36 |     color: rgb(19, 19, 19);
37 |     color: #fff;
38 |     background-color: #147efb;
39 |     border-radius: 0 20px 20px 20px;
40 |     padding: 1em;
41 | }
42 | 
43 | @media (max-width:600px){
44 |     .main--container{
45 |         width: 100%;
46 |         padding: 1em;
47 |     }
48 | }
49 | 


--------------------------------------------------------------------------------
/templates/feed.html:
--------------------------------------------------------------------------------
  1 | {% extends 'main.html' %}
  2 | {% load static %}
  3 | 
  4 | {% block content %}
  5 | 
  6 |     <button id="edit-name">Edit Username</button>
  7 | 
  8 |     <section class="main--container">
  9 |         <form id="post_form">
 10 |             <input type="text" name="body" placeholder="Enter message..." />
 11 |         </form>
 12 | 
 13 |         <div id="post__list">
 14 |             {% for post in posts %}
 15 |                 <div class="post-wrapper">
 16 |                     <strong>{{post.sender}} -  {{post.created|timesince}} ago</strong>
 17 |                     <p class="post__body">{{ post.body }}</p>
 18 |                 </div>
 19 |             {% endfor %}
 20 |         </div>
 21 |     </section>
 22 | 
 23 | <script type="text/javascript" src="{% static 'js/agora-rtm.js' %}"></script>
 24 | 
 25 | <script type="text/javascript">
 26 | 
 27 |     let changeNameBtn = document.getElementById('edit-name')
 28 |     changeNameBtn.addEventListener('click', (e)=> {
 29 |         localStorage.removeItem('username')
 30 |         window.location = '/register'
 31 |     })
 32 | 
 33 |     const APP_ID ="ENTER YOU APP ID HERE"
 34 |     const token = null
 35 |     const uid = String(Math.floor(Math.random() * 232 ))
 36 |     const CHANNEL_NAME = "main"
 37 | 
 38 |     let client;
 39 |     let channel;
 40 | 
 41 | 
 42 |     let username = localStorage.getItem('username')
 43 |     if(!username){
 44 |         window.location = '/register'
 45 |     }
 46 | 
 47 |     let iniateRTM = async () => {
 48 |         client = await AgoraRTM.createInstance(APP_ID)
 49 |         await client.login({uid, token})
 50 | 
 51 |         channel = await client.createChannel(CHANNEL_NAME)
 52 |         await channel.join()
 53 | 
 54 |         channel.on('ChannelMessage', (message, peerId) => {
 55 |             post = JSON.parse(message.text)
 56 |             addMessageToDom(post)
 57 |         })
 58 |     }
 59 | 
 60 |     iniateRTM()
 61 | 
 62 | 
 63 |     let form = document.getElementById('post_form')
 64 | 
 65 |     form.addEventListener('submit', (e) => {
 66 |         e.preventDefault()
 67 |         let bodyText = e.target.body.value
 68 |         console.log(bodyText)
 69 |         form.reset()
 70 | 
 71 |         submitData(bodyText)
 72 |     })
 73 | 
 74 | 
 75 |     let submitData = async (bodyText) => {
 76 |         let response = await fetch('/add/', {
 77 |             method:'POST',
 78 |             headers:{
 79 |                 'Content-Type':'application/json'
 80 |             },
 81 |             body:JSON.stringify({'body':bodyText, 'sender':username})
 82 |         })
 83 |         let data = await response.json()
 84 |         data['sender'] = username
 85 | 
 86 |         channel.sendMessage({text:JSON.stringify(data), type:'text'})
 87 | 
 88 |         console.log('Data:', data )
 89 |         addMessageToDom(data)
 90 | 
 91 | 
 92 |     }
 93 | 
 94 | 
 95 |     let addMessageToDom  = async (message) => {
 96 |         let postList = document.getElementById('post__list')
 97 | 
 98 |         let timeSince = new Intl.RelativeTimeFormat('en')
 99 | 
100 |         let messageTime = new Date()
101 | 
102 |         let diff = new Date() - new Date(messageTime)
103 |         let ago = timeSince.format(- diff/(1000*60*60*24), 'seconds')
104 | 
105 |         let postWrapper = `<div class="post-wrapper">
106 |                                 <strong>Posted ${ago} - by ${message.sender}</strong>
107 |                                 <p class="post__body">${ message.body }</p>
108 |                                
109 |                             </div>`
110 | 
111 |         postList.insertAdjacentHTML('afterbegin', postWrapper)
112 |     }
113 | 
114 | 
115 | 
116 | </script>
117 | {% endblock content %}


--------------------------------------------------------------------------------
/templates/login.html:
--------------------------------------------------------------------------------
 1 | {% extends 'main.html' %}
 2 | 
 3 | {% block content %}
 4 | 
 5 |     <div>
 6 |         <form id="login_form">
 7 |             <p>Enter your user name</p>
 8 |             <input type="text" name="username"/>
 9 |         </form>
10 |     </div>
11 | 
12 | 
13 |     <script>
14 |         let form = document.getElementById('login_form')
15 |         
16 |         form.addEventListener('submit', (e) => {
17 |             e.preventDefault()
18 |             let username = e.target.username.value
19 |             localStorage.setItem('username', username)
20 | 
21 |             if (username){
22 |                 window.location = '/'
23 |             }
24 |         })
25 |     </script>
26 | 
27 | {% endblock content %}


--------------------------------------------------------------------------------
/templates/main.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | {% load static %}
 3 | <html>
 4 | <head>
 5 |     <meta charset='utf-8'>
 6 |     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 7 |     <title>Public Chat</title>
 8 |     <meta name='viewport' content='width=device-width, initial-scale=1'>
 9 |     <link rel='stylesheet' type='text/css' media='screen' href='{% static "styles/main.css" %}'>
10 | </head>
11 | <body>
12 |     {% block content %}
13 | 
14 |     {% endblock %}
15 | </body>
16 | </html>


--------------------------------------------------------------------------------