19 |
38 |
39 | );
40 | };
41 |
42 | export default ChatList;
43 |
--------------------------------------------------------------------------------
/client/src/components/Chat/components/MessageList/components/SenderMessage.jsx:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | import moment from "moment";
3 | import React from "react";
4 | import ClockIcon from "./ClockIcon";
5 | import OnlineIndicator from "../../OnlineIndicator";
6 |
7 | const SenderMessage = ({
8 | user,
9 | message = "Lorem ipsum dolor...",
10 | date,
11 | onUserClicked,
12 | }) => (
13 |
20 |
22 | Chats
21 |
23 |
36 |
37 |
24 | {processedRooms.map((room) => (
25 |
28 | dispatch({ type: "set current room", payload: room.id })
29 | }
30 | active={currentRoom === room.id}
31 | room={room}
32 | />
33 | ))}
34 |
35 |
14 |
44 | );
45 |
46 | export default SenderMessage;
47 |
--------------------------------------------------------------------------------
/client/build/static/js/2.a950a4d1.chunk.js.LICENSE.txt:
--------------------------------------------------------------------------------
1 | /*
2 | object-assign
3 | (c) Sindre Sorhus
4 | @license MIT
5 | */
6 |
7 | /*!
8 | Copyright (c) 2017 Jed Watson.
9 | Licensed under the MIT License (MIT), see
10 | http://jedwatson.github.io/classnames
11 | */
12 |
13 | /*!
14 | * The buffer module from node.js, for the browser.
15 | *
16 | * @author Feross Aboukhadijeh
15 |
42 |
43 |
19 |
41 |
20 | {user && (
21 |
40 |
22 |
34 | )}
35 |
30 | {user.username}
31 |
32 | {message}
36 |
37 |
13 | {true ? (
14 | <>
15 |
25 | );
26 |
27 | const LogoutButton = ({ onLogOut, col = 5, noinfo = false }) => (
28 |
33 |
35 | );
36 |
37 | const UserInfo = ({ user, col = 7, noinfo = false }) => (
38 |
43 |
56 | );
57 |
58 | export default Footer;
59 |
--------------------------------------------------------------------------------
/marketplace.json:
--------------------------------------------------------------------------------
1 | {
2 | "app_name": "Basic Redis chat app in Python",
3 | "description": "Showcases how to impliment chat app in Python (Flask), Socket.IO and Redis",
4 | "type": "Building Block",
5 | "contributed_by": "Redis",
6 | "repo_url": "https://github.com/redis-developer/basic-redis-chat-app-demo-python",
7 | "preview_image_url": "https://raw.githubusercontent.com/redis-developer/basic-redis-chat-app-demo-python/master/images/app_preview_image.png",
8 | "download_url": "https://github.com/redis-developer/basic-redis-chat-app-demo-python/archive/main.zip",
9 | "hosted_url": "",
10 | "quick_deploy": "true",
11 | "deploy_buttons": [
12 | {
13 | "heroku": "https://heroku.com/deploy?template=https://github.com/redis-developer/basic-redis-chat-app-demo-python"
14 | },
15 | {
16 | "Google": "https://deploy.cloud.run/?git_repo=https://github.com/redis-developer/basic-redis-chat-app-demo-python.git"
17 | }
18 | ],
19 | "language": [
20 | "Python"
21 | ],
22 | "redis_commands": [
23 | "AUTH",
24 | "INCR",
25 | "DECR",
26 | "HMSET",
27 | "EXISTS",
28 | "HEXISTS",
29 | "SET",
30 | "GET",
31 | "HGETALL",
32 | "ZRANGEBYSCORE",
33 | "ZADD",
34 | "SADD",
35 | "HMGET",
36 | "SISMEMBER",
37 | "SMEMBERS",
38 | "SREM",
39 | "PUBLISH",
40 | "SUBSCRIBE"
41 | ],
42 | "redis_use_cases": [
43 | "Pub/Sub"
44 | ],
45 | "redis_features": [],
46 | "app_image_urls": [
47 | "https://raw.githubusercontent.com/redis-developer/basic-redis-chat-app-demo-python/master/docs/screenshot001.png"
48 | ],
49 | "youtube_url": "https://www.youtube.com/watch?v=miK7xDkDXF0",
50 | "special_tags": [],
51 | "verticals": [],
52 | "markdown": "https://raw.githubusercontent.com/redis-developer/basic-redis-chat-app-demo-python/master/README.md"
53 | }
--------------------------------------------------------------------------------
/chat/app.py:
--------------------------------------------------------------------------------
1 | import os
2 | import sys
3 |
4 | from flask import Flask
5 | from flask_cors import CORS
6 | from flask_session import Session
7 | from flask_socketio import SocketIO
8 |
9 | from chat import utils
10 | from chat.config import get_config
11 | from chat.socketio_signals import io_connect, io_disconnect, io_join_room, io_on_message
12 |
13 | sess = Session()
14 | app = Flask(__name__, static_url_path="", static_folder="../client/build")
15 | app.config.from_object(get_config())
16 | CORS(app)
17 | socketio = SocketIO(app, cors_allowed_origins="*")
18 |
19 |
20 | def run_app():
21 | # Create redis connection etc.
22 | # Here we initialize our database, create demo data (if it's necessary)
23 | # TODO: maybe we need to do it for gunicorn run also?
24 | utils.init_redis()
25 | sess.init_app(app)
26 |
27 | # moved to this method bc it only applies to app.py direct launch
28 | # Get port from the command-line arguments or environment variables
29 | arg = sys.argv[1:]
30 | # TODO: js client is hardcoded to proxy all to 8000 port, maybe change it?
31 | port = int(os.environ.get("PORT", 5000))
32 | if len(arg) > 0:
33 | try:
34 | port = int(arg[0])
35 | except ValueError:
36 | pass
37 |
38 | # we need socketio.run() instead of app.run() bc we need to use the eventlet server
39 | socketio.run(app, port=port, debug=True, use_reloader=True)
40 |
41 |
42 | # this was rewritten from decorators so we can move this methods to another file
43 | socketio.on_event("connect", io_connect)
44 | socketio.on_event("disconnect", io_disconnect)
45 | socketio.on_event("room.join", io_join_room)
46 | socketio.on_event("message", io_on_message)
47 |
48 | # routes moved to another file and we need to import it lately
49 | # bc they are using app from this file
50 | from chat import routes # noqa
51 |
52 | application = app
53 |
--------------------------------------------------------------------------------
/client/src/utils.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 |
3 | import { getUsers } from "./api";
4 |
5 | /**
6 | * @param {string[]} names
7 | * @param {string} username
8 | */
9 | export const parseRoomName = (names, username) => {
10 | for (let name of names) {
11 | if (typeof name !== 'string') {
12 | name = name[0];
13 | }
14 | if (name !== username) {
15 | return name;
16 | }
17 | }
18 | return names[0];
19 | };
20 |
21 | /** Get an avatar for a room or a user */
22 | export const getAvatarByUserAndRoomId = (roomId = "1") => {
23 | const TOTAL_IMAGES = 13;
24 | const seed1 = 654;
25 | const seed2 = 531;
26 |
27 | const uidParsed = +roomId.split(":").pop();
28 | let roomIdParsed = +roomId.split(":").reverse().pop();
29 | if (roomIdParsed < 0) {
30 | roomIdParsed += 3555;
31 | }
32 |
33 | const theId = (uidParsed * seed1 + roomIdParsed * seed2) % TOTAL_IMAGES;
34 |
35 | return `${process.env.PUBLIC_URL}/avatars/${theId}.jpg`;
36 | };
37 |
38 | const jdenticon = require("jdenticon");
39 |
40 | const avatars = {};
41 | export const getAvatar = (username) => {
42 | let av = avatars[username];
43 | if (av === undefined) {
44 | av =
45 | "data:image/svg+xml;base64," + window.btoa(jdenticon.toSvg(username, 50));
46 | avatars[username] = av;
47 | }
48 | return av;
49 | };
50 |
51 | export const populateUsersFromLoadedMessages = async (users, dispatch, messages) => {
52 | const userIds = {};
53 | messages.forEach((message) => {
54 | userIds[message.from] = 1;
55 | });
56 |
57 | const ids = Object.keys(userIds).filter(
58 | (id) => users[id] === undefined
59 | );
60 |
61 | if (ids.length !== 0) {
62 | /** We need to fetch users first */
63 | const newUsers = await getUsers(ids);
64 | dispatch({
65 | type: "append users",
66 | payload: newUsers,
67 | });
68 | }
69 |
70 | };
--------------------------------------------------------------------------------
/client/build/index.html:
--------------------------------------------------------------------------------
1 |
44 |
46 | {!noinfo && (
47 |
48 |
54 | )}
55 | {user.username}
49 |
50 |
53 | Active
52 |
33 |
74 | );
75 | }
76 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Byte-compiled / optimized / DLL files
2 | __pycache__/
3 | *.py[cod]
4 | *$py.class
5 |
6 | # C extensions
7 | *.so
8 |
9 | # Distribution / packaging
10 | .Python
11 | build/
12 | develop-eggs/
13 | dist/
14 | downloads/
15 | eggs/
16 | .eggs/
17 | lib/
18 | lib64/
19 | parts/
20 | sdist/
21 | var/
22 | wheels/
23 | share/python-wheels/
24 | *.egg-info/
25 | .installed.cfg
26 | *.egg
27 | MANIFEST
28 |
29 | # PyInstaller
30 | # Usually these files are written by a python script from a template
31 | # before PyInstaller builds the exe, so as to inject date/other infos into it.
32 | *.manifest
33 | *.spec
34 |
35 | # Installer logs
36 | pip-log.txt
37 | pip-delete-this-directory.txt
38 |
39 | # Unit test / coverage reports
40 | htmlcov/
41 | .tox/
42 | .nox/
43 | .coverage
44 | .coverage.*
45 | .cache
46 | nosetests.xml
47 | coverage.xml
48 | *.cover
49 | *.py,cover
50 | .hypothesis/
51 | .pytest_cache/
52 | cover/
53 |
54 | # Translations
55 | *.mo
56 | *.pot
57 |
58 | # Django stuff:
59 | *.log
60 | local_settings.py
61 | db.sqlite3
62 | db.sqlite3-journal
63 |
64 | # Flask stuff:
65 | instance/
66 | .webassets-cache
67 |
68 | # Scrapy stuff:
69 | .scrapy
70 |
71 | # Sphinx documentation
72 | docs/_build/
73 |
74 | # PyBuilder
75 | .pybuilder/
76 | target/
77 |
78 | # Jupyter Notebook
79 | .ipynb_checkpoints
80 |
81 | # IPython
82 | profile_default/
83 | ipython_config.py
84 |
85 | # pyenv
86 | # For a library or package, you might want to ignore these files since the code is
87 | # intended to run in multiple environments; otherwise, check them in:
88 | # .python-version
89 |
90 | # pipenv
91 | # According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
92 | # However, in case of collaboration, if having platform-specific dependencies or dependencies
93 | # having no cross-platform support, pipenv may install dependencies that don't work, or not
94 | # install all needed dependencies.
95 | #Pipfile.lock
96 |
97 | # PEP 582; used by e.g. github.com/David-OConnor/pyflow
98 | __pypackages__/
99 |
100 | # Celery stuff
101 | celerybeat-schedule
102 | celerybeat.pid
103 |
104 | # SageMath parsed files
105 | *.sage.py
106 |
107 | # Environments
108 | .env
109 | .venv
110 | env/
111 | venv/
112 | ENV/
113 | env.bak/
114 | venv.bak/
115 |
116 | # Spyder project settings
117 | .spyderproject
118 | .spyproject
119 |
120 | # Rope project settings
121 | .ropeproject
122 |
123 | # mkdocs documentation
124 | /site
125 |
126 | # mypy
127 | .mypy_cache/
128 | .dmypy.json
129 | dmypy.json
130 |
131 | # Pyre type checker
132 | .pyre/
133 |
134 | # pytype static type analyzer
135 | .pytype/
136 |
137 | # Cython debug symbols
138 | cython_debug/
139 |
140 | # IDE
141 | .idea
--------------------------------------------------------------------------------
/client/src/api.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | axios.defaults.withCredentials = true;
3 |
4 | const BASE_URL = '';
5 |
6 | export const MESSAGES_TO_LOAD = 15;
7 |
8 | const url = x => `${BASE_URL}${x}`;
9 |
10 | /** Checks if there's an existing session. */
11 | export const getMe = () => {
12 | return axios.get(url('/me'))
13 | .then(x => x.data)
14 | .catch(_ => null);
15 | };
16 |
17 | /** Handle user log in */
18 | export const login = (username, password) => {
19 | return axios.post(url('/login'), {
20 | username,
21 | password
22 | }).then(x =>
23 | x.data
24 | )
25 | .catch(e => { throw new Error(e.response && e.response.data && e.response.data.message); });
26 | };
27 |
28 | export const logOut = () => {
29 | return axios.post(url('/logout'));
30 | };
31 |
32 | /**
33 | * Function for checking which deployment urls exist.
34 | *
35 | * @returns {Promise<{
36 | * heroku?: string;
37 | * google_cloud?: string;
38 | * vercel?: string;
39 | * github?: string;
40 | * }>}
41 | */
42 | export const getButtonLinks = () => {
43 | return axios.get(url('/links'))
44 | .then(x => x.data)
45 | .catch(_ => null);
46 | };
47 |
48 | /** This was used to get a random login name (for demo purposes). */
49 | export const getRandomName = () => {
50 | return axios.get(url('/randomname')).then(x => x.data);
51 | };
52 |
53 | /**
54 | * Load messages
55 | *
56 | * @param {string} id room id
57 | * @param {number} offset
58 | * @param {number} size
59 | */
60 | export const getMessages = (id,
61 | offset = 0,
62 | size = MESSAGES_TO_LOAD
63 | ) => {
64 | return axios.get(url(`/room/${id}/messages`), {
65 | params: {
66 | offset,
67 | size
68 | }
69 | })
70 | .then(x => x.data.reverse());
71 | };
72 |
73 | /**
74 | * @returns {Promise<{ name: string, id: string, messages: Array
34 |
73 |
35 |
43 | {/* Chat Box*/}
44 |
45 | {
63 | e.preventDefault();
64 | onMessageSend(message.trim(), roomId);
65 | setMessage("");
66 |
67 | messageListElement.current.scrollTop =
68 | messageListElement.current.scrollHeight;
69 | }}
70 | />
71 |
72 |
46 |
48 | {room ? room.name : "Room"}
47 |
23 | {messages === undefined ? (
24 |
88 | );
89 | export default MessageList;
90 |
--------------------------------------------------------------------------------
/chat/socketio_signals.py:
--------------------------------------------------------------------------------
1 | import json
2 |
3 | from flask import session
4 | from flask_socketio import emit, join_room
5 |
6 | from chat import utils
7 |
8 |
9 | def publish(name, message, broadcast=False, room=None):
10 | """If the messages' origin is the same sever, use socket.io for sending, otherwise: pub/sub"""
11 | if room:
12 | emit(name, message, room=room, broadcast=True)
13 | else:
14 | emit(name, message, broadcast=broadcast)
15 | # Here is an additional publish for the redis pub/sub
16 | outgoing = {"serverId": utils.SERVER_ID, "type": name, "data": message}
17 | utils.redis_client.publish("MESSAGES", json.dumps(outgoing))
18 |
19 |
20 | def io_connect():
21 | """Handle socket.io connection, check if the session is attached"""
22 | # it's better to use get method for dict-like objects, it provides helpful setting of default value
23 | user = session.get("user", None)
24 | if not user:
25 | return
26 |
27 | user_id = user.get("id", None)
28 | utils.redis_client.sadd("online_users", user_id)
29 |
30 | msg = dict(user)
31 | msg["online"] = True
32 |
33 | publish("user.connected", msg, broadcast=True)
34 |
35 |
36 | def io_disconnect():
37 | user = session.get("user", None)
38 | if user:
39 | utils.redis_client.srem("online_users", user["id"])
40 | msg = dict(user)
41 | msg["online"] = False
42 | publish("user.disconnected", msg, broadcast=True)
43 |
44 |
45 | def io_join_room(id_room):
46 | join_room(id_room)
47 |
48 |
49 | def io_on_message(message):
50 | """Handle incoming message, make sure it's send to the correct room."""
51 |
52 | def escape(htmlstring):
53 | """Clean up html from the incoming string"""
54 | escapes = {'"': """, "'": "'", "<": "<", ">": ">"}
55 | # This is done first to prevent escaping other escapes.
56 | htmlstring = htmlstring.replace("&", "&")
57 | for seq, esc in escapes.items():
58 | htmlstring = htmlstring.replace(seq, esc)
59 | return htmlstring
60 |
61 | # Make sure nothing illegal is sent here.
62 | message["message"] = escape(message["message"])
63 | # The user might be set as offline if he tried to access the chat from another tab, pinging by message
64 | # resets the user online status
65 | utils.redis_client.sadd("online_users", message["from"])
66 | # We've got a new message. Store it in db, then send back to the room. */
67 | message_string = json.dumps(message)
68 | room_id = message["roomId"]
69 | room_key = f"room:{room_id}"
70 |
71 | is_private = not bool(utils.redis_client.exists(f"{room_key}:name"))
72 | room_has_messages = bool(utils.redis_client.exists(room_key))
73 |
74 | if is_private and not room_has_messages:
75 | ids = room_id.split(":")
76 | msg = {
77 | "id": room_id,
78 | "names": [
79 | utils.hmget(f"user:{ids[0]}", "username"),
80 | utils.hmget(f"user:{ids[1]}", "username"),
81 | ],
82 | }
83 | publish("show.room", msg, broadcast=True)
84 | utils.redis_client.zadd(room_key, {message_string: int(message["date"])})
85 |
86 | if is_private:
87 | publish("message", message, room=room_id)
88 | else:
89 | publish("message", message, broadcast=True)
90 |
--------------------------------------------------------------------------------
/chat/utils.py:
--------------------------------------------------------------------------------
1 | import json
2 | import math
3 | import random
4 |
5 | import bcrypt
6 |
7 | from chat import demo_data
8 | from chat.config import get_config
9 |
10 | SERVER_ID = random.uniform(0, 322321)
11 |
12 | redis_client = get_config().redis_client
13 |
14 |
15 | def make_username_key(username):
16 | return f"username:{username}"
17 |
18 |
19 | def create_user(username, password):
20 | username_key = make_username_key(username)
21 | # Create a user
22 | hashed_password = bcrypt.hashpw(str(password).encode("utf-8"), bcrypt.gensalt(10))
23 | next_id = redis_client.incr("total_users")
24 | user_key = f"user:{next_id}"
25 | redis_client.set(username_key, user_key)
26 | redis_client.hmset(user_key, {"username": username, "password": hashed_password})
27 |
28 | redis_client.sadd(f"user:{next_id}:rooms", "0")
29 |
30 | return {"id": next_id, "username": username}
31 |
32 |
33 | def get_messages(room_id=0, offset=0, size=50):
34 | """Check if room with id exists; fetch messages limited by size"""
35 | room_key = f"room:{room_id}"
36 | room_exists = redis_client.exists(room_key)
37 | if not room_exists:
38 | return []
39 | else:
40 | values = redis_client.zrevrange(room_key, offset, offset + size)
41 | return list(map(lambda x: json.loads(x.decode("utf-8")), values))
42 |
43 |
44 | def hmget(key, key2):
45 | """Wrapper around hmget to unpack bytes from hmget"""
46 | result = redis_client.hmget(key, key2)
47 | return list(map(lambda x: x.decode("utf-8"), result))
48 |
49 |
50 | def get_private_room_id(user1, user2):
51 | if math.isnan(user1) or math.isnan(user2) or user1 == user2:
52 | return None
53 | min_user_id = user2 if user1 > user2 else user1
54 | max_user_id = user1 if user1 > user2 else user2
55 | return f"{min_user_id}:{max_user_id}"
56 |
57 |
58 | def create_private_room(user1, user2):
59 | """Create a private room and add users to it"""
60 | room_id = get_private_room_id(user1, user2)
61 | if not room_id:
62 | return None, True
63 |
64 | # Add rooms to those users
65 | redis_client.sadd(f"user:{user1}:rooms", room_id)
66 | redis_client.sadd(f"user:{user2}:rooms", room_id)
67 |
68 | return (
69 | {
70 | "id": room_id,
71 | "names": [
72 | hmget(f"user:{user1}", "username"),
73 | hmget(f"user:{user2}", "username"),
74 | ],
75 | },
76 | False,
77 | )
78 |
79 |
80 | def init_redis():
81 | # We store a counter for the total users and increment it on each register
82 | total_users_exist = redis_client.exists("total_users")
83 | if not total_users_exist:
84 | # This counter is used for the id
85 | redis_client.set("total_users", 0)
86 | # Some rooms have pre-defined names. When the clients attempts to fetch a room, an additional lookup
87 | # is handled to resolve the name.
88 | # Rooms with private messages don't have a name
89 | redis_client.set(f"room:0:name", "General")
90 |
91 | demo_data.create()
92 |
93 | # We use event stream for pub sub. A client connects to the stream endpoint and listens for the messages
94 |
95 |
96 | def event_stream():
97 | """Handle message formatting, etc."""
98 | pubsub = redis_client.pubsub(ignore_subscribe_messages=True)
99 | pubsub.subscribe("MESSAGES")
100 | for message in pubsub.listen():
101 | message_parsed = json.loads(message["data"])
102 | if message_parsed["serverId"] == SERVER_ID:
103 | continue
104 |
105 | data = "data: %s\n\n" % json.dumps(
106 | {"type": message_parsed["type"], "data": message_parsed["data"],}
107 | )
108 | yield data
--------------------------------------------------------------------------------
/client/src/components/Chat/use-chat-handlers.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | import { useCallback } from "react";
3 | import { useEffect, useState, useRef } from "react";
4 | import { addRoom, getMessages } from "../../api";
5 | import { useAppState } from "../../state";
6 | import { parseRoomName, populateUsersFromLoadedMessages } from "../../utils";
7 |
8 | /** Lifecycle hooks with callbacks for the Chat component */
9 | const useChatHandlers = (/** @type {import("../../state").UserEntry} */ user) => {
10 | const [state, dispatch] = useAppState();
11 | const messageListElement = useRef(null);
12 |
13 | /** @type {import("../../state").Room} */
14 | const room = state.rooms[state.currentRoom];
15 | const roomId = room?.id;
16 | const messages = room?.messages;
17 |
18 | const [message, setMessage] = useState("");
19 |
20 | const scrollToTop = useCallback(() => {
21 | setTimeout(() => {
22 | if (messageListElement.current) {
23 | messageListElement.current.scrollTop = 0;
24 | }
25 | }, 0);
26 | }, []);
27 |
28 | const scrollToBottom = useCallback(() => {
29 | if (messageListElement.current) {
30 | messageListElement.current.scrollTo({
31 | top: messageListElement.current.scrollHeight,
32 | });
33 | }
34 | }, []);
35 |
36 | useEffect(() => {
37 | scrollToBottom();
38 | }, [messages, scrollToBottom]);
39 |
40 | const onFetchMessages = useCallback(
41 | (offset = 0, prepend = false) => {
42 | getMessages(roomId, offset).then(async (messages) => {
43 | /** We've got messages but it's possible we might not have the cached user entires which correspond to those messages */
44 | await populateUsersFromLoadedMessages(state.users, dispatch, messages);
45 |
46 | dispatch({
47 | type: prepend ? "prepend messages" : "set messages",
48 | payload: { id: roomId, messages: messages },
49 | });
50 | if (prepend) {
51 | setTimeout(() => {
52 | scrollToTop();
53 | }, 10);
54 | } else {
55 | scrollToBottom();
56 | }
57 | });
58 | },
59 | [dispatch, roomId, scrollToBottom, scrollToTop, state.users]
60 | );
61 |
62 | useEffect(() => {
63 | if (roomId === undefined) {
64 | return;
65 | }
66 | if (messages === undefined) {
67 | /** Fetch logic goes here */
68 | onFetchMessages();
69 | }
70 | }, [
71 | messages,
72 | dispatch,
73 | roomId,
74 | state.users,
75 | state,
76 | scrollToBottom,
77 | onFetchMessages,
78 | ]);
79 |
80 | useEffect(() => {
81 | if (messageListElement.current) {
82 | scrollToBottom();
83 | }
84 | }, [scrollToBottom, roomId]);
85 |
86 | const onUserClicked = async (userId) => {
87 | /** Check if room exists. */
88 | const targetUser = state.users[userId];
89 | let roomId = targetUser.room;
90 | if (roomId === undefined) {
91 | // @ts-ignore
92 | const room = await addRoom(userId, user.id);
93 | roomId = room.id;
94 | /** We need to set this room id to user. */
95 | dispatch({ type: "set user", payload: { ...targetUser, room: roomId } });
96 | /** Then a new room should be added to the store. */
97 | dispatch({
98 | type: "add room",
99 | // @ts-ignore
100 | payload: { id: roomId, name: parseRoomName(room.names, user.username) },
101 | });
102 | }
103 | /** Then a room should be changed */
104 | dispatch({ type: "set current room", payload: roomId });
105 | };
106 |
107 | const onLoadMoreMessages = useCallback(() => {
108 | onFetchMessages(room.offset, true);
109 | }, [onFetchMessages, room]);
110 |
111 | return {
112 | onLoadMoreMessages,
113 | onUserClicked,
114 | message,
115 | setMessage,
116 | dispatch,
117 | room,
118 | rooms: state.rooms,
119 | currentRoom: state.currentRoom,
120 | messageListElement,
121 | roomId,
122 | users: state.users,
123 | messages,
124 | };
125 | };
126 | export default useChatHandlers;
--------------------------------------------------------------------------------
/client/src/components/Chat/components/ChatList/components/ChatListItem/index.jsx:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | import "./style.css";
3 | import React, { useMemo } from "react";
4 | import { useAppState } from "../../../../../../state";
5 | import moment from "moment";
6 | import { useEffect } from "react";
7 | import { getMessages } from "../../../../../../api";
8 | import AvatarImage from "../AvatarImage";
9 | import OnlineIndicator from "../../../OnlineIndicator";
10 |
11 | /**
12 | * @param {{ active: boolean; room: import('../../../../../../state').Room; onClick: () => void; }} props
13 | */
14 | const ChatListItem = ({ room, active = false, onClick }) => {
15 | const { online, name, lastMessage, userId } = useChatListItemHandlers(room);
16 | return (
17 |
31 | {messages && messages.length !== 0 && (
32 | <>
33 | {room.offset && room.offset >= MESSAGES_TO_LOAD ? (
34 | onUserClicked(message.from)}
66 | key={key}
67 | message={message.message}
68 | date={message.date}
69 | user={users[message.from]}
70 | />
71 | );
72 | }
73 | return (
74 |
87 |
35 |
38 |
54 | ) : (
55 | <>
56 | )}
57 | {messages.map((message, x) => {
58 | const key = message.message + message.date + message.from + x;
59 | if (message.from === "info") {
60 | return
39 |
49 |
50 |
53 |
23 |
41 | );
42 | };
43 |
44 | const useChatListItemHandlers = (
45 | /** @type {import("../../../../../../state").Room} */ room
46 | ) => {
47 | const { id, name } = room;
48 | const [state] = useAppState();
49 |
50 | /** Here we want to associate the room with a user by its name (since it's unique). */
51 | const [isUser, online, userId] = useMemo(() => {
52 | try {
53 | let pseudoUserId = Math.abs(parseInt(id.split(":").reverse().pop()));
54 | const isUser = pseudoUserId > 0;
55 | const usersFiltered = Object.entries(state.users)
56 | .filter(([, user]) => user.username === name)
57 | .map(([, user]) => user);
58 | let online = false;
59 | if (usersFiltered.length > 0) {
60 | online = usersFiltered[0].online;
61 | pseudoUserId = +usersFiltered[0].id;
62 | }
63 | return [isUser, online, pseudoUserId];
64 | } catch (_) {
65 | return [false, false, "0"];
66 | }
67 | }, [id, name, state.users]);
68 |
69 | const lastMessage = useLastMessage(room);
70 |
71 | return {
72 | isUser,
73 | online,
74 | userId,
75 | name: room.name,
76 | lastMessage,
77 | };
78 | };
79 |
80 | const useLastMessage = (
81 | /** @type {import("../../../../../../state").Room} */ room
82 | ) => {
83 | const [, dispatch] = useAppState();
84 | const { lastMessage } = room;
85 | useEffect(() => {
86 | if (lastMessage === undefined) {
87 | /** need to fetch it */
88 | if (room.messages === undefined) {
89 | getMessages(room.id, 0, 1).then((messages) => {
90 | let message = null;
91 | if (messages.length !== 0) {
92 | message = messages.pop();
93 | }
94 | dispatch({
95 | type: "set last message",
96 | payload: { id: room.id, lastMessage: message },
97 | });
98 | });
99 | } else if (room.messages.length === 0) {
100 | dispatch({
101 | type: "set last message",
102 | payload: { id: room.id, lastMessage: null },
103 | });
104 | } else {
105 | dispatch({
106 | type: "set last message",
107 | payload: {
108 | id: room.id,
109 | lastMessage: room.messages[room.messages.length - 1],
110 | },
111 | });
112 | }
113 | }
114 | }, [lastMessage, dispatch, room]);
115 |
116 | return lastMessage;
117 | };
118 |
119 | export default ChatListItem;
120 |
--------------------------------------------------------------------------------
/client/src/state.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | import { createContext, useContext, useReducer } from "react";
3 |
4 | /**
5 | * @typedef {{
6 | * from: string
7 | * date: number
8 | * message: string
9 | * roomId?: string
10 | * }} Message
11 | *
12 | * @typedef {{
13 | * name: string;
14 | * id: string;
15 | * messages?: Message[]
16 | * connected?: boolean;
17 | * offset?: number;
18 | * forUserId?: null | number | string
19 | * lastMessage?: Message | null
20 | * }} Room
21 | *
22 | * @typedef {{
23 | * username: string;
24 | * id: string;
25 | * online?: boolean;
26 | * room?: string;
27 | * }} UserEntry
28 | *
29 | * @typedef {{
30 | * currentRoom: string;
31 | * rooms: {[id: string]: Room};
32 | * users: {[id: string]: UserEntry}
33 | * }} State
34 | *
35 | * @param {State} state
36 | * @param {{type: string; payload: any}} action
37 | * @returns {State}
38 | */
39 | const reducer = (state, action) => {
40 | switch (action.type) {
41 | case "clear":
42 | return { currentRoom: "0", rooms: {}, users: {} };
43 | case "set user": {
44 | return {
45 | ...state,
46 | users: { ...state.users, [action.payload.id]: action.payload },
47 | };
48 | }
49 | case "make user online": {
50 | return {
51 | ...state,
52 | users: {
53 | ...state.users,
54 | [action.payload]: { ...state.users[action.payload], online: true },
55 | },
56 | };
57 | }
58 | case "append users": {
59 | return { ...state, users: { ...state.users, ...action.payload } };
60 | }
61 | case "set messages": {
62 | return {
63 | ...state,
64 | rooms: {
65 | ...state.rooms,
66 | [action.payload.id]: {
67 | ...state.rooms[action.payload.id],
68 | messages: action.payload.messages,
69 | offset: action.payload.messages.length,
70 | },
71 | },
72 | };
73 | }
74 | case "prepend messages": {
75 | const messages = [
76 | ...action.payload.messages,
77 | ...state.rooms[action.payload.id].messages,
78 | ];
79 | return {
80 | ...state,
81 | rooms: {
82 | ...state.rooms,
83 | [action.payload.id]: {
84 | ...state.rooms[action.payload.id],
85 | messages,
86 | offset: messages.length,
87 | },
88 | },
89 | };
90 | }
91 | case "append message":
92 | if (state.rooms[action.payload.id] === undefined) {
93 | return state;
94 | }
95 | return {
96 | ...state,
97 | rooms: {
98 | ...state.rooms,
99 | [action.payload.id]: {
100 | ...state.rooms[action.payload.id],
101 | lastMessage: action.payload.message,
102 | messages: state.rooms[action.payload.id].messages
103 | ? [
104 | ...state.rooms[action.payload.id].messages,
105 | action.payload.message,
106 | ]
107 | : undefined,
108 | },
109 | },
110 | };
111 | case 'set last message':
112 | return { ...state, rooms: { ...state.rooms, [action.payload.id]: { ...state.rooms[action.payload.id], lastMessage: action.payload.lastMessage } } };
113 | case "set current room":
114 | return { ...state, currentRoom: action.payload };
115 | case "add room":
116 | return {
117 | ...state,
118 | rooms: { ...state.rooms, [action.payload.id]: action.payload },
119 | };
120 | case "set rooms": {
121 | /** @type {Room[]} */
122 | const newRooms = action.payload;
123 | const rooms = { ...state.rooms };
124 | newRooms.forEach((room) => {
125 | rooms[room.id] = {
126 | ...room,
127 | messages: rooms[room.id] && rooms[room.id].messages,
128 | };
129 | });
130 | return { ...state, rooms };
131 | }
132 | default:
133 | return state;
134 | }
135 | };
136 |
137 | /** @type {State} */
138 | const initialState = {
139 | currentRoom: "main",
140 | rooms: {},
141 | users: {},
142 | };
143 |
144 | const useAppStateContext = () => {
145 | return useReducer(reducer, initialState);
146 | };
147 |
148 | // @ts-ignore
149 | export const AppContext = createContext();
150 |
151 | /**
152 | * @returns {[
153 | * State,
154 | * React.Dispatch<{
155 | * type: string;
156 | * payload: any;
157 | * }>
158 | * ]}
159 | */
160 | export const useAppState = () => {
161 | const [state, dispatch] = useContext(AppContext);
162 | return [state, dispatch];
163 | };
164 |
165 | export default useAppStateContext;
--------------------------------------------------------------------------------
/client/src/styles/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: "Poppins", Arial, Helvetica, sans-serif;
3 | font-size: 13px;
4 | color: #495057;
5 | }
6 |
7 | .navbar {
8 | box-shadow: rgba(18, 38, 63, 0.03) 0px 12px 24px 0px;
9 | }
10 |
11 | .navbar-brand {
12 | font-size: 16px;
13 | }
14 |
15 | .chats-title {
16 | padding-left: 14px;
17 | }
18 |
19 | .login-page {
20 | display: flex;
21 | align-items: center;
22 | flex-direction: column;
23 | justify-content: center;
24 | padding-bottom: 190px;
25 | height: 100vh;
26 | }
27 |
28 | .form-signin {
29 | width: 100%;
30 | max-width: 330px;
31 | padding: 15px;
32 | margin: 0 auto;
33 | }
34 |
35 | .text-small {
36 | font-size: 0.9rem;
37 | }
38 |
39 | .messages-box,
40 | .chat-box {
41 | /* height: 510px; */
42 | width: 100%;
43 | }
44 |
45 | .chat-box-wrapper {
46 | flex: 1;
47 | overflow-y: scroll;
48 | }
49 |
50 | .rounded-lg {
51 | border-radius: 0.5rem;
52 | }
53 |
54 | input::placeholder {
55 | font-size: 0.9rem;
56 | color: #999;
57 | }
58 |
59 | .centered-box {
60 | width: 100%;
61 | height: 100vh;
62 | display: flex;
63 | align-items: center;
64 | justify-content: center;
65 | }
66 |
67 | .login-error-anchor {
68 | position: relative;
69 | }
70 |
71 | .toast-box {
72 | text-align: left;
73 | margin-top: 30px;
74 | position: absolute;
75 | width: 100%;
76 | top: 0;
77 | display: flex;
78 | flex-direction: row;
79 | justify-content: center;
80 | }
81 |
82 | .full-height {
83 | height: 100vh;
84 | flex-direction: column;
85 | display: flex;
86 | }
87 |
88 | .full-height .container {
89 | flex: 1;
90 | }
91 |
92 | .container .row {
93 | height: 100%;
94 | }
95 |
96 | .flex-column {
97 | display: flex;
98 | flex-direction: column;
99 | }
100 |
101 | .bg-white.flex-column {
102 | height: 100%;
103 | }
104 |
105 | .flex {
106 | flex: 1;
107 | }
108 |
109 | .logout-button {
110 | cursor: pointer;
111 | display: flex;
112 | flex-direction: row;
113 | align-items: center;
114 | padding: 15px 20px;
115 | }
116 |
117 | .logout-button svg {
118 | margin-right: 15px;
119 | }
120 |
121 | .no-messages {
122 | opacity: 0.5;
123 | height: 100%;
124 | width: 100%;
125 | }
126 |
127 | .avatar-box {
128 | width: 50px;
129 | height: 50px;
130 | object-fit: cover;
131 | object-position: 50%;
132 | overflow: hidden;
133 | border-radius: 4px;
134 | cursor: pointer;
135 | }
136 |
137 | .user-link {
138 | cursor: pointer;
139 | }
140 |
141 | .user-link:hover {
142 | text-decoration: underline;
143 | }
144 |
145 | .online-indicator {
146 | width: 14px;
147 | height: 14px;
148 | border: 2px solid white;
149 | bottom: -7px;
150 | right: -7px;
151 | background-color: #4df573;
152 | }
153 |
154 | .online-indicator.selected {
155 | border: none;
156 | width: 12px;
157 | height: 12px;
158 | bottom: -5px;
159 | right: -5px;
160 | }
161 |
162 | .online-indicator.offline {
163 | background-color: #bbb;
164 | }
165 |
166 | span.pseudo-link {
167 | font-size: 14px;
168 | text-decoration: underline;
169 | color: var(--blue);
170 | cursor: pointer;
171 | }
172 |
173 | span.pseudo-link:hover {
174 | text-decoration: none;
175 | }
176 |
177 | .list-group-item {
178 | cursor: pointer;
179 | height: 70px;
180 | box-sizing: border-box;
181 | transition: background-color 0.1s ease-out;
182 | }
183 |
184 | .chat-icon {
185 | width: 45px;
186 | height: 45px;
187 | border-radius: 4px;
188 | background-color: #eee;
189 | }
190 |
191 | .chat-icon.active {
192 | background-color: var(--blue);
193 | }
194 |
195 | .chats-title {
196 | font-size: 15px;
197 | }
198 |
199 | .chat-body {
200 | border-radius: 10px !important;
201 | }
202 |
203 | .chat-list-container {
204 | height: 100%;
205 | }
206 |
207 | .chat-input {
208 | border-radius: 30px !important;
209 | background-color: #eff2f7 !important;
210 | border-color: #eff2f7 !important;
211 | padding-right: 120px;
212 | }
213 |
214 | .form-control::placeholder {
215 | font-size: 13px;
216 | }
217 |
218 | .form-control {
219 | display: block;
220 | width: 100%;
221 | height: calc(1.5em + 0.94rem + 2px);
222 | padding: 7.5px 12px;
223 | font-size: 13px;
224 | font-weight: 400;
225 | line-height: 1.5;
226 | color: #495057;
227 | background-color: #fff;
228 | background-clip: padding-box;
229 | border: 1px solid #ced4da;
230 | -webkit-transition: border-color 0.15s ease-in-out,
231 | -webkit-box-shadow 0.15s ease-in-out;
232 | transition: border-color 0.15s ease-in-out,
233 | -webkit-box-shadow 0.15s ease-in-out;
234 | transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
235 | transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
236 | -webkit-box-shadow 0.15s ease-in-out;
237 | }
238 |
239 | .rounded-button {
240 | border-radius: 30px;
241 | background-color: var(--light);
242 | }
243 |
--------------------------------------------------------------------------------
/chat/routes.py:
--------------------------------------------------------------------------------
1 | import json
2 | import os
3 |
4 | import bcrypt
5 | from flask import Response, jsonify, request, session
6 |
7 | from chat import utils
8 | from chat.app import app
9 | from chat.auth import auth_middleware
10 |
11 |
12 | @app.route("/stream")
13 | def stream():
14 | return Response(utils.event_stream(), mimetype="text/event-stream")
15 |
16 |
17 | # Return our SPA application.
18 | @app.route("/", defaults={"path": ""})
19 | @app.route("/
24 |
26 |
27 |
29 |
30 |
35 | {lastMessage && (
36 | {name}
31 | {lastMessage && ( 32 |{lastMessage.message}
33 | )} 34 |
37 | {moment.unix(lastMessage.date).format("LT")}
38 |
39 | )}
40 |
38 |
45 |
25 |
132 |
133 | );
134 | }
135 |
136 | const UsernameSelect = ({ username, setUsername, names = [""] }) => {
137 | const [open, setOpen] = useState(false);
138 | const [width, setWidth] = useState(0);
139 | const ref = useRef();
140 | /** @ts-ignore */
141 | const clientRectWidth = ref.current?.getBoundingClientRect().width;
142 | useEffect(() => {
143 | /** @ts-ignore */
144 | setWidth(clientRectWidth);
145 | }, [clientRectWidth]);
146 |
147 | /** Click away listener */
148 | useEffect(() => {
149 | if (open) {
150 | const listener = () => setOpen(false);
151 | document.addEventListener("click", listener);
152 | return () => document.removeEventListener("click", listener);
153 | }
154 | }, [open]);
155 |
156 | /** Make the current div focused */
157 | useEffect(() => {
158 | if (open) {
159 | /** @ts-ignore */
160 | ref.current?.focus();
161 | }
162 | }, [open]);
163 |
164 | return (
165 |
31 |
131 |
32 |
71 |
72 |
130 |
43 |
55 |
44 |
47 | Welcome Back !
45 |Sign in to continue
46 |
48 | 
53 |
54 |
53 |
59 |
70 |
67 |
69 | setOpen((o) => !o)}
170 | >
171 |
194 | );
195 | };
196 |
--------------------------------------------------------------------------------
/client/build/static/js/runtime-main.c012fedc.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["../webpack/bootstrap"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","Object","prototype","hasOwnProperty","call","installedChunks","push","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","1","exports","module","l","m","c","d","name","getter","o","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","p","jsonpArray","this","oldJsonpFunction","slice"],"mappings":"aACE,SAASA,EAAqBC,GAQ7B,IAPA,IAMIC,EAAUC,EANVC,EAAWH,EAAK,GAChBI,EAAcJ,EAAK,GACnBK,EAAiBL,EAAK,GAIHM,EAAI,EAAGC,EAAW,GACpCD,EAAIH,EAASK,OAAQF,IACzBJ,EAAUC,EAASG,GAChBG,OAAOC,UAAUC,eAAeC,KAAKC,EAAiBX,IAAYW,EAAgBX,IACpFK,EAASO,KAAKD,EAAgBX,GAAS,IAExCW,EAAgBX,GAAW,EAE5B,IAAID,KAAYG,EACZK,OAAOC,UAAUC,eAAeC,KAAKR,EAAaH,KACpDc,EAAQd,GAAYG,EAAYH,IAKlC,IAFGe,GAAqBA,EAAoBhB,GAEtCO,EAASC,QACdD,EAASU,OAATV,GAOD,OAHAW,EAAgBJ,KAAKK,MAAMD,EAAiBb,GAAkB,IAGvDe,IAER,SAASA,IAER,IADA,IAAIC,EACIf,EAAI,EAAGA,EAAIY,EAAgBV,OAAQF,IAAK,CAG/C,IAFA,IAAIgB,EAAiBJ,EAAgBZ,GACjCiB,GAAY,EACRC,EAAI,EAAGA,EAAIF,EAAed,OAAQgB,IAAK,CAC9C,IAAIC,EAAQH,EAAeE,GACG,IAA3BX,EAAgBY,KAAcF,GAAY,GAE3CA,IACFL,EAAgBQ,OAAOpB,IAAK,GAC5Be,EAASM,EAAoBA,EAAoBC,EAAIN,EAAe,KAItE,OAAOD,EAIR,IAAIQ,EAAmB,GAKnBhB,EAAkB,CACrBiB,EAAG,GAGAZ,EAAkB,GAGtB,SAASS,EAAoB1B,GAG5B,GAAG4B,EAAiB5B,GACnB,OAAO4B,EAAiB5B,GAAU8B,QAGnC,IAAIC,EAASH,EAAiB5B,GAAY,CACzCK,EAAGL,EACHgC,GAAG,EACHF,QAAS,IAUV,OANAhB,EAAQd,GAAUW,KAAKoB,EAAOD,QAASC,EAAQA,EAAOD,QAASJ,GAG/DK,EAAOC,GAAI,EAGJD,EAAOD,QAKfJ,EAAoBO,EAAInB,EAGxBY,EAAoBQ,EAAIN,EAGxBF,EAAoBS,EAAI,SAASL,EAASM,EAAMC,GAC3CX,EAAoBY,EAAER,EAASM,IAClC5B,OAAO+B,eAAeT,EAASM,EAAM,CAAEI,YAAY,EAAMC,IAAKJ,KAKhEX,EAAoBgB,EAAI,SAASZ,GACX,qBAAXa,QAA0BA,OAAOC,aAC1CpC,OAAO+B,eAAeT,EAASa,OAAOC,YAAa,CAAEC,MAAO,WAE7DrC,OAAO+B,eAAeT,EAAS,aAAc,CAAEe,OAAO,KAQvDnB,EAAoBoB,EAAI,SAASD,EAAOE,GAEvC,GADU,EAAPA,IAAUF,EAAQnB,EAAoBmB,IAC/B,EAAPE,EAAU,OAAOF,EACpB,GAAW,EAAPE,GAA8B,kBAAVF,GAAsBA,GAASA,EAAMG,WAAY,OAAOH,EAChF,IAAII,EAAKzC,OAAO0C,OAAO,MAGvB,GAFAxB,EAAoBgB,EAAEO,GACtBzC,OAAO+B,eAAeU,EAAI,UAAW,CAAET,YAAY,EAAMK,MAAOA,IACtD,EAAPE,GAA4B,iBAATF,EAAmB,IAAI,IAAIM,KAAON,EAAOnB,EAAoBS,EAAEc,EAAIE,EAAK,SAASA,GAAO,OAAON,EAAMM,IAAQC,KAAK,KAAMD,IAC9I,OAAOF,GAIRvB,EAAoB2B,EAAI,SAAStB,GAChC,IAAIM,EAASN,GAAUA,EAAOiB,WAC7B,WAAwB,OAAOjB,EAAgB,SAC/C,WAA8B,OAAOA,GAEtC,OADAL,EAAoBS,EAAEE,EAAQ,IAAKA,GAC5BA,GAIRX,EAAoBY,EAAI,SAASgB,EAAQC,GAAY,OAAO/C,OAAOC,UAAUC,eAAeC,KAAK2C,EAAQC,IAGzG7B,EAAoB8B,EAAI,IAExB,IAAIC,EAAaC,KAAyB,mBAAIA,KAAyB,oBAAK,GACxEC,EAAmBF,EAAW5C,KAAKuC,KAAKK,GAC5CA,EAAW5C,KAAOf,EAClB2D,EAAaA,EAAWG,QACxB,IAAI,IAAIvD,EAAI,EAAGA,EAAIoD,EAAWlD,OAAQF,IAAKP,EAAqB2D,EAAWpD,IAC3E,IAAIU,EAAsB4C,EAI1BxC,I","file":"static/js/runtime-main.c012fedc.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t1: 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/\";\n\n \tvar jsonpArray = this[\"webpackJsonpclient\"] = this[\"webpackJsonpclient\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// run deferred modules from other chunks\n \tcheckDeferredModules();\n"],"sourceRoot":""}
--------------------------------------------------------------------------------
/client/build/static/css/main.c68ddd7d.chunk.css:
--------------------------------------------------------------------------------
1 | :root{--primary:#556ee6!important;--light:#f5f5f8!important;--success:#34c38f!important}.bg-success{background-color:#34c38f!important;background-color:var(--success)!important}.bg-light{background-color:#f5f5f8!important;background-color:var(--light)!important}.bg-gray{background-color:var(--gray)!important}.bg-primary{background-color:#556ee6!important;background-color:var(--primary)!important}.text-primary{color:#556ee6!important;color:var(--primary)!important}.list-group-item.active{background-color:#556ee6!important;background-color:var(--primary)!important;border-color:#556ee6!important;border-color:var(--primary)!important}.btn-rounded{border-radius:30px!important}.btn{display:inline-block;font-weight:400;color:#495057;text-align:center;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;background-color:transparent;border:1px solid transparent;border-radius:30px!important;padding:.47rem .75rem;font-size:.8125rem;line-height:1.5;border-radius:.25rem;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}.btn-primary{color:#fff;background-color:#556ee6;background-color:var(--primary);border-color:#556ee6;border-color:var(--primary)}.btn-primary.focus,.btn-primary:focus,.btn-primary:hover{color:#fff;background-color:#3452e1;border-color:#2948df}.font-size-14{font-size:14px!important}.font-size-11{font-size:11px!important}.font-size-12{font-size:12px!important}.font-size-15{font-size:15px!important}.w-md{min-width:110px}body{font-family:"Poppins",Arial,Helvetica,sans-serif;font-size:13px;color:#495057}.navbar{box-shadow:0 12px 24px 0 rgba(18,38,63,.03)}.navbar-brand{font-size:16px}.chats-title{padding-left:14px}.login-page{display:flex;align-items:center;flex-direction:column;justify-content:center;padding-bottom:190px;height:100vh}.form-signin{width:100%;max-width:330px;padding:15px;margin:0 auto}.text-small{font-size:.9rem}.chat-box,.messages-box{width:100%}.chat-box-wrapper{flex:1 1;overflow-y:scroll}.rounded-lg{border-radius:.5rem}input::-webkit-input-placeholder{font-size:.9rem;color:#999}input:-ms-input-placeholder{font-size:.9rem;color:#999}input::placeholder{font-size:.9rem;color:#999}.centered-box{width:100%;height:100vh;display:flex;align-items:center;justify-content:center}.login-error-anchor{position:relative}.toast-box{text-align:left;margin-top:30px;position:absolute;width:100%;top:0;display:flex;flex-direction:row;justify-content:center}.full-height{height:100vh;flex-direction:column;display:flex}.full-height .container{flex:1 1}.container .row{height:100%}.flex-column{display:flex;flex-direction:column}.bg-white.flex-column{height:100%}.flex{flex:1 1}.logout-button{cursor:pointer;display:flex;flex-direction:row;align-items:center;padding:15px 20px}.logout-button svg{margin-right:15px}.no-messages{opacity:.5;height:100%;width:100%}.avatar-box{width:50px;height:50px;object-fit:cover;object-position:50%;overflow:hidden;border-radius:4px}.avatar-box,.user-link{cursor:pointer}.user-link:hover{text-decoration:underline}.online-indicator{width:14px;height:14px;border:2px solid #fff;bottom:-7px;right:-7px;background-color:#4df573}.online-indicator.selected{border:none;width:12px;height:12px;bottom:-5px;right:-5px}.online-indicator.offline{background-color:#bbb}span.pseudo-link{font-size:14px;text-decoration:underline;color:var(--blue);cursor:pointer}span.pseudo-link:hover{text-decoration:none}.list-group-item{cursor:pointer;height:70px;box-sizing:border-box;transition:background-color .1s ease-out}.chat-icon{width:45px;height:45px;border-radius:4px;background-color:#eee}.chat-icon.active{background-color:var(--blue)}.chats-title{font-size:15px}.chat-body{border-radius:10px!important}.chat-list-container{height:100%}.chat-input{border-radius:30px!important;background-color:#eff2f7!important;border-color:#eff2f7!important;padding-right:120px}.form-control::-webkit-input-placeholder{font-size:13px}.form-control:-ms-input-placeholder{font-size:13px}.form-control::placeholder{font-size:13px}.form-control{display:block;width:100%;height:calc(1.5em + .94rem + 2px);padding:7.5px 12px;font-size:13px;font-weight:400;line-height:1.5;color:#495057;background-color:#fff;background-clip:padding-box;border:1px solid #ced4da;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.rounded-button{border-radius:30px;background-color:var(--light)}@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLDz8Z11lFd2JQEl8qw.woff2) format("woff2");unicode-range:U+0900-097f,U+1cd0-1cf6,U+1cf8-1cf9,U+200c-200d,U+20a8,U+20b9,U+25cc,U+a830-a839,U+a8e0-a8fb}@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLDz8Z1JlFd2JQEl8qw.woff2) format("woff2");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:"Poppins";font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLDz8Z1xlFd2JQEk.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJbecnFHGPezSQ.woff2) format("woff2");unicode-range:U+0900-097f,U+1cd0-1cf6,U+1cf8-1cf9,U+200c-200d,U+20a8,U+20b9,U+25cc,U+a830-a839,U+a8e0-a8fb}@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJnecnFHGPezSQ.woff2) format("woff2");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLGT9Z11lFd2JQEl8qw.woff2) format("woff2");unicode-range:U+0900-097f,U+1cd0-1cf6,U+1cf8-1cf9,U+200c-200d,U+20a8,U+20b9,U+25cc,U+a830-a839,U+a8e0-a8fb}@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLGT9Z1JlFd2JQEl8qw.woff2) format("woff2");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLGT9Z1xlFd2JQEk.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z11lFd2JQEl8qw.woff2) format("woff2");unicode-range:U+0900-097f,U+1cd0-1cf6,U+1cf8-1cf9,U+200c-200d,U+20a8,U+20b9,U+25cc,U+a830-a839,U+a8e0-a8fb}@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z1JlFd2JQEl8qw.woff2) format("woff2");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLCz7Z11lFd2JQEl8qw.woff2) format("woff2");unicode-range:U+0900-097f,U+1cd0-1cf6,U+1cf8-1cf9,U+200c-200d,U+20a8,U+20b9,U+25cc,U+a830-a839,U+a8e0-a8fb}@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLCz7Z1JlFd2JQEl8qw.woff2) format("woff2");unicode-range:U+0100-024f,U+0259,U+1e??,U+2020,U+20a0-20ab,U+20ad-20cf,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v15/pxiByp8kv8JHgFVrLCz7Z1xlFd2JQEk.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+2000-206f,U+2074,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}.login-form .username-select button{background-color:transparent!important;color:inherit;padding:7.5px 12px!important;display:block!important;border:1px solid #ced4da!important;border-radius:4px!important;width:100%!important;text-align:left!important}.login-form .username-select .btn-primary:not(:disabled):not(.disabled).active,.login-form .username-select .btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle{color:inherit}.login-form .username-select .dropdown-menu.show.dropdown-menu-right{transform:translateY(38px)!important}.username-select-dropdown{position:relative;display:flex!important;align-items:center;background-color:transparent!important;color:inherit;padding:0 12px!important;border:1px solid #ced4da!important;border-radius:4px!important;width:100%!important;text-align:left!important;height:calc(1.5em + .94rem + 2px)!important;cursor:pointer}.username-select-dropdown .username-select-block{background-color:var(--white);position:absolute;top:-1138px;left:0;opacity:0;transform:scale(.5);transform-origin:top left;transition:opacity .2s ease,transform .2s ease;border:1px solid #ced4da!important;border-radius:4px!important;padding:8px 0}.username-select-dropdown:focus{outline:none;border-color:#80bdff!important;box-shadow:0 0 0 .2rem rgba(0,123,255,.25)}.username-select-dropdown .username-select-block.open{top:42px;transform:scale(1);opacity:1}.username-select-row{display:flex;width:100%;justify-content:space-between;align-items:center}.username-select-dropdown .username-select-block .username-select-block-item{padding:4px 24px}.username-select-dropdown .username-select-block .username-select-block-item:hover{background-color:var(--light)}.chat-list-item{cursor:pointer;padding:14px 16px}.mdi-circle:before{content:""}.mdi-set,.mdi:before{display:inline-block;font:normal normal normal 24px/1 Material Design Icons;font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
2 | /*# sourceMappingURL=main.c68ddd7d.chunk.css.map */
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Basic Redis Chat App Demo Python (Flask)
2 |
3 | Showcases how to impliment chat app in Python (Flask), Socket.IO and Redis. This example uses **pub/sub** feature combined with web-sockets for implementing the message communication between client and server.
4 |
5 |
172 |
179 | {username}
173 |
174 |
177 |
178 |
183 | {names.map((name) => (
184 |
193 | setUsername(name)}
188 | >
189 | {name}
190 |
191 | ))}
192 | 
6 | 
7 |
8 | # Overview video
9 |
10 | Here's a short video that explains the project and how it uses Redis:
11 |
12 | [](https://www.youtube.com/watch?v=miK7xDkDXF0)
13 |
14 | ## Technical Stacks
15 |
16 | - Frontend - _React_, _Socket.IO_
17 | - Backend - _Flask_, _Redis_
18 |
19 | ## How it works?
20 |
21 | ### Initialization
22 |
23 | For simplicity, a key with **total_users** value is checked: if it does not exist, we fill the Redis database with initial data.
24 | `EXISTS total_users` (checks if the key exists)
25 |
26 | The demo data initialization is handled in multiple steps:
27 |
28 | **Creating of demo users:**
29 | We create a new user id: `INCR total_users`. Then we set a user ID lookup key by user name: **_e.g._** `SET username:nick user:1`. And finally, the rest of the data is written to the hash set: **_e.g._** `HSET user:1 username "nick" password "bcrypt_hashed_password"`.
30 |
31 | Additionally, each user is added to the default "General" room. For handling rooms for each user, we have a set that holds the room ids. Here's an example command of how to add the room: **_e.g._** `SADD user:1:rooms "0"`.
32 |
33 | **Populate private messages between users.**
34 | At first, private rooms are created: if a private room needs to be established, for each user a room id: `room:1:2` is generated, where numbers correspond to the user ids in ascending order.
35 |
36 | **_E.g._** Create a private room between 2 users: `SADD user:1:rooms 1:2` and `SADD user:2:rooms 1:2`.
37 |
38 | Then we add messages to this room by writing to a sorted set:
39 |
40 | **_E.g._** `ZADD room:1:2 1615480369 "{'from': 1, 'date': 1615480369, 'message': 'Hello', 'roomId': '1:2'}"`.
41 |
42 | We use a stringified _JSON_ for keeping the message structure and simplify the implementation details for this demo-app.
43 |
44 | **Populate the "General" room with messages.** Messages are added to the sorted set with id of the "General" room: `room:0`
45 |
46 | ### Registration
47 |
48 | 
49 |
50 | Redis is used mainly as a database to keep the user/messages data and for sending messages between connected servers.
51 |
52 | #### How the data is stored:
53 |
54 | - The chat data is stored in various keys and various data types.
55 | - User data is stored in a hash set where each user entry contains the next values:
56 | - `username`: unique user name;
57 | - `password`: hashed password
58 |
59 | * User hash set is accessed by key `user:{userId}`. The data for it stored with `HSET key field data`. User id is calculated by incrementing the `total_users`.
60 |
61 | - E.g `INCR total_users`
62 |
63 | * Username is stored as a separate key (`username:{username}`) which returns the userId for quicker access.
64 | - E.g `SET username:Alex 4`
65 |
66 | #### How the data is accessed:
67 |
68 | - **Get User** `HGETALL user:{id}`
69 |
70 | - E.g `HGETALL user:2`, where we get data for the user with id: 2.
71 |
72 | - **Online users:** will return ids of users which are online
73 | - E.g `SMEMBERS online_users`
74 |
75 | #### Code Example: Prepare User Data in Redis HashSet
76 |
77 | ```Python
78 | def create_user(username, password):
79 | username_key = make_username_key(username)
80 | # Create a user
81 | hashed_password = bcrypt.hashpw(str(password).encode("utf-8"), bcrypt.gensalt(10))
82 | next_id = redis_client.incr("total_users")
83 | user_key = f"user:{next_id}"
84 | redis_client.set(username_key, user_key)
85 | redis_client.hmset(user_key, {"username": username, "password": hashed_password})
86 |
87 | redis_client.sadd(f"user:{next_id}:rooms", "0")
88 |
89 | return {"id": next_id, "username": username}
90 | ```
91 |
92 | ### Rooms
93 |
94 | 
95 |
96 | #### How the data is stored:
97 |
98 | Each user has a set of rooms associated with them.
99 |
100 | **Rooms** are sorted sets which contains messages where score is the timestamp for each message. Each room has a name associated with it.
101 |
102 | - Rooms which user belongs too are stored at `user:{userId}:rooms` as a set of room ids.
103 |
104 | - E.g `SADD user:Alex:rooms 1`
105 |
106 | - Set room name: `SET room:{roomId}:name {name}`
107 | - E.g `SET room:1:name General`
108 |
109 | #### How the data is accessed:
110 |
111 | - **Get room name** `GET room:{roomId}:name`.
112 |
113 | - E. g `GET room:0:name`. This should return "General"
114 |
115 | - **Get room ids of a user:** `SMEMBERS user:{id}:rooms`.
116 | - E. g `SMEMBERS user:2:rooms`. This will return IDs of rooms for user with ID: 2
117 |
118 | #### Code Example: Get all My Rooms
119 |
120 | ```Python
121 | def get_rooms_for_user_id(user_id=0):
122 | """Get rooms for the selected user."""
123 | # We got the room ids
124 | room_ids = list(
125 | map(
126 | lambda x: x.decode("utf-8"),
127 | list(utils.redis_client.smembers(f"user:{user_id}:rooms")),
128 | )
129 | )
130 | rooms = []
131 |
132 | for room_id in room_ids:
133 | name = utils.redis_client.get(f"room:{room_id}:name")
134 |
135 | # It's a room without a name, likey the one with private messages
136 | if not name:
137 | room_exists = utils.redis_client.exists(f"room:{room_id}")
138 | if not room_exists:
139 | continue
140 |
141 | user_ids = room_id.split(":")
142 | if len(user_ids) != 2:
143 | return jsonify(None), 400
144 |
145 | rooms.append(
146 | {
147 | "id": room_id,
148 | "names": [
149 | utils.hmget(f"user:{user_ids[0]}", "username"),
150 | utils.hmget(f"user:{user_ids[1]}", "username"),
151 | ],
152 | }
153 | )
154 | else:
155 | rooms.append({"id": room_id, "names": [name.decode("utf-8")]})
156 | return jsonify(rooms), 200
157 | ```
158 |
159 | ### Messages
160 |
161 | #### Pub/sub
162 |
163 | After initialization, a pub/sub subscription is created: `SUBSCRIBE MESSAGES`. At the same time, each server instance will run a listener on a message on this channel to receive real-time updates.
164 |
165 | Again, for simplicity, each message is serialized to **_JSON_**, which we parse and then handle in the same manner, as WebSocket messages.
166 |
167 | Pub/sub allows connecting multiple servers written in different platforms without taking into consideration the implementation detail of each server.
168 |
169 | #### How the data is stored:
170 |
171 | - Messages are stored at `room:{roomId}` key in a sorted set (as mentioned above). They are added with `ZADD room:{roomId} {timestamp} {message}` command. Message is serialized to an app-specific JSON string.
172 | - E.g `ZADD room:0 1617197047 { "From": "2", "Date": 1617197047, "Message": "Hello", "RoomId": "1:2" }`
173 |
174 | #### How the data is accessed:
175 |
176 | - **Get list of messages** `ZREVRANGE room:{roomId} {offset_start} {offset_end}`.
177 | - E.g `ZREVRANGE room:1:2 0 50` will return 50 messages with 0 offsets for the private room between users with IDs 1 and 2.
178 |
179 | #### Code Example: Send Message
180 |
181 | ```Python
182 | # The user might be set as offline if he tried to access the chat from another tab, pinging by message
183 | # resets the user online status
184 | utils.redis_client.sadd("online_users", message["from"])
185 | # We've got a new message. Store it in db, then send back to the room. */
186 | message_string = json.dumps(message)
187 | room_id = message["roomId"]
188 | room_key = f"room:{room_id}"
189 |
190 | is_private = not bool(utils.redis_client.exists(f"{room_key}:name"))
191 | room_has_messages = bool(utils.redis_client.exists(room_key))
192 |
193 | if is_private and not room_has_messages:
194 | ids = room_id.split(":")
195 | msg = {
196 | "id": room_id,
197 | "names": [
198 | utils.hmget(f"user:{ids[0]}", "username"),
199 | utils.hmget(f"user:{ids[1]}", "username"),
200 | ],
201 | }
202 | publish("show.room", msg, broadcast=True)
203 | utils.redis_client.zadd(room_key, {message_string: int(message["date"])})
204 | ```
205 |
206 | ### Session handling
207 |
208 | The chat server works as a basic _REST_ API which involves keeping the session and handling the user state in the chat rooms (besides the WebSocket/real-time part).
209 |
210 | When a WebSocket/real-time server is instantiated, which listens for the next events:
211 |
212 | **Connection**. A new user is connected. At this point, a user ID is captured and saved to the session (which is cached in Redis). Note, that session caching is language/library-specific and it's used here purely for persistence and maintaining the state between server reloads.
213 |
214 | A global set with `online_users` key is used for keeping the online state for each user. So on a new connection, a user ID is written to that set:
215 |
216 | **E.g.** `SADD online_users 1` (We add user with id 1 to the set **online_users**).
217 |
218 | After that, a message is broadcasted to the clients to notify them that a new user is joined the chat.
219 |
220 | **Disconnect**. It works similarly to the connection event, except we need to remove the user for **online_users** set and notify the clients: `SREM online_users 1` (makes user with id 1 offline).
221 |
222 | **Message**. A user sends a message, and it needs to be broadcasted to the other clients. The pub/sub allows us also to broadcast this message to all server instances which are connected to this Redis:
223 |
224 | `PUBLISH message "{'serverId': 4132, 'type':'message', 'data': {'from': 1, 'date': 1615480369, 'message': 'Hello', 'roomId': '1:2'}}"`
225 |
226 | Note we send additional data related to the type of the message and the server id. Server id is used to discard the messages by the server instance which sends them since it is connected to the same `MESSAGES` channel.
227 |
228 | `type` field of the serialized JSON corresponds to the real-time method we use for real-time communication (connect/disconnect/message).
229 |
230 | `data` is method-specific information. In the example above it's related to the new message.
231 |
232 | #### How the data is stored / accessed:
233 |
234 | The session data is stored in Redis by utilizing the [**redis**](https://pypi.org/project/redis/) client module.
235 |
236 | ```Python
237 | class Config(object):
238 | # Parse redis environment variables.
239 | redis_endpoint_url = os.environ.get("REDIS_ENDPOINT_URL", "127.0.0.1:6379")
240 | REDIS_HOST, REDIS_PORT = tuple(redis_endpoint_url.split(":"))
241 | REDIS_PASSWORD = os.environ.get("REDIS_PASSWORD", None)
242 | SECRET_KEY = os.environ.get("SECRET_KEY", "Optional default value")
243 | SESSION_TYPE = "redis"
244 | redis_client = redis.Redis(
245 | host=REDIS_HOST, port=REDIS_PORT, password=REDIS_PASSWORD
246 | )
247 | SESSION_REDIS = redis_client
248 | ```
249 |
250 | ```Python
251 | from flask_session import Session
252 | sess = Session()
253 | # ...
254 | sess.init_app(app)
255 | ```
256 |
257 | ## How to run it locally?
258 |
259 | #### Copy `.env.sample` to create `.env`. And provide the values for environment variables
260 |
261 | - REDIS_ENDPOINT_URI: Redis server URI
262 | - REDIS_PASSWORD: Password to the server
263 |
264 | #### Run frontend
265 |
266 | ```sh
267 | cd client
268 | yarn install
269 | yarn start
270 | ```
271 |
272 | #### Run backend
273 |
274 | Run with venv:
275 |
276 | ```sh
277 | python app.py
278 | ```
279 |
280 | ## Try it out
281 |
282 | #### Deploy to Heroku
283 |
284 |
285 |
286 | 
287 |
288 |
293 |
294 | 
295 |
296 |