Skip to content

Commit ab1c479

Browse files
raphaeltmraphaeltm
committed
fix gitignore and add templates and css
1 parent 22ff689 commit ab1c479

File tree

7 files changed

+296
-45
lines changed

7 files changed

+296
-45
lines changed

‎samples/django-channels-redis/app/.gitignore‎

Lines changed: 111 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,128 @@
1-
# Ignore compiled Python files
2-
*.pyc
1+
# Byte-compiled / optimized / DLL files
32
__pycache__/
3+
*.py[cod]
4+
*$py.class
45

5-
# Ignore the virtual environment
6-
venv/
7-
env/
6+
# C extensions
7+
*.so
88

9-
# Ignore the Django secret key
10-
*.secret_key
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+
*.egg-info/
24+
.installed.cfg
25+
*.egg
1126

12-
# Ignore database files
13-
*.db
14-
*.sqlite3
27+
# PyInstaller
28+
# Usually these files are written by a python script from a template
29+
# before PyInstaller builds the exe, so as to inject date/other infos into it.
30+
*.manifest
31+
*.spec
1532

16-
# Ignore static files
17-
staticfiles/
33+
# Installer logs
34+
pip-log.txt
35+
pip-delete-this-directory.txt
1836

19-
# Ignore media files
20-
media/
37+
# Unit test / coverage reports
38+
htmlcov/
39+
.tox/
40+
.nox/
41+
.coverage
42+
.coverage.*
43+
.cache
44+
nosetests.xml
45+
coverage.xml
46+
*.cover
47+
*.py,cover
48+
.hypothesis/
49+
.pytest_cache/
50+
cover/
2151

22-
# Ignore log files
52+
# Translations
53+
*.mo
54+
*.pot
55+
56+
# Django stuff:
2357
*.log
58+
local_settings.py
59+
db.sqlite3
60+
db.sqlite3-journal
2461

25-
# Ignore IDE and editor files
26-
.vscode/
27-
.idea/
28-
*.code-workspace
62+
# Flask stuff:
63+
instance/
64+
.webassets-cache
2965

30-
# Ignore local development settings
31-
local_settings.py
66+
# Scrapy stuff:
67+
.scrapy
3268

33-
# Ignore deployment files
34-
deploy/
69+
# Sphinx documentation
70+
docs/_build/
71+
docs/_build/doctrees
72+
docs/_build/html
73+
docs/_build/latex
74+
docs/_build/man
75+
docs/_build/rst
76+
docs/_build/texinfo
77+
docs/_build/xml
3578

36-
# Ignore sensitive information
37-
*.env
38-
*.env.*
39-
*.key
79+
# PyBuilder
80+
target/
4081

41-
# Ignore compiled JavaScript files
42-
*.js
82+
# Jupyter Notebook
83+
.ipynb_checkpoints
4384

44-
# Ignore compiled CSS files
45-
*.css
85+
# IPython
86+
profile_default/
87+
ipython_config.py
4688

47-
# Ignore compiled HTML files
48-
*.html
89+
# pyenv
90+
.python-version
4991

50-
# Ignore compiled binary files
51-
*.exe
52-
*.dll
53-
*.so
54-
*.dylib
92+
# celery beat schedule file
93+
celerybeat-schedule
94+
95+
# dotenv
96+
.env
97+
.env.*
98+
99+
# virtualenv
100+
venv/
101+
ENV/
102+
env/
103+
env.bak/
104+
venv.bak/
105+
106+
# Spyder project settings
107+
.spyderproject
108+
.spyproject
109+
110+
# Rope project settings
111+
.ropeproject
112+
113+
# mkdocs documentation
114+
/site
115+
116+
# mypy
117+
.mypy_cache/
118+
.dmypy.json
119+
dmypy.json
120+
121+
# Pyre type checker
122+
.pyre/
123+
124+
# VS Code
125+
.vscode/
55126

56-
# Ignore package manager files
57-
node_modules/
58-
yarn-error.log
127+
# macOS
128+
.DS_Store

‎samples/django-channels-redis/app/chat/consumers.py‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,8 @@ class MessagePayload(BaseModel):
1010
message: str
1111
timestamp: float = None
1212

13-
class GroupPayload(BaseModel):
13+
class GroupPayload(MessagePayload):
1414
type: str
15-
user: str = "Anonymous"
16-
message: str
17-
timestamp: float = None
1815

1916
class ChatConsumer(WebsocketConsumer):
2017
def connect(self):

‎samples/django-channels-redis/app/chat/static/chat/css/pico.min.css‎

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎samples/django-channels-redis/app/chat/templates/chat/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{% extends './layout.html' %}
2+
3+
{% block content %}
4+
<main>
5+
<div class="container">
6+
<h1>What chat room would you like to enter?</h1>
7+
<br />
8+
<fieldset role="group">
9+
<input id="room-name-input" type="text" size="100" /><br />
10+
<input id="room-name-submit" type="button" value="Enter" />
11+
</fieldset>
12+
</div>
13+
</main>
14+
15+
<script>
16+
document.querySelector('#room-name-input').focus()
17+
document.querySelector('#room-name-input').onkeyup = function (e) {
18+
if (e.keyCode === 13) {
19+
// enter, return
20+
document.querySelector('#room-name-submit').click()
21+
}
22+
}
23+
24+
document.querySelector('#room-name-submit').onclick = function (e) {
25+
var roomName = document.querySelector('#room-name-input').value
26+
window.location.pathname = '/' + roomName + '/'
27+
}
28+
</script>
29+
{% endblock %}

‎samples/django-channels-redis/app/chat/templates/chat/layout.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{% load static %}
2+
3+
<!DOCTYPE html>
4+
<html lang="en">
5+
<head>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="{% static 'chat/css/pico.min.css' %}">
9+
</head>
10+
<body>
11+
{% block content %}
12+
{% endblock %}
13+
</body>
14+
</html>

‎samples/django-channels-redis/app/chat/templates/chat/room.html‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
{% extends './layout.html' %}
2+
3+
{% block content %}
4+
<style>
5+
body,
6+
html {
7+
height: 100vh;
8+
margin: 0;
9+
display: flex;
10+
flex-direction: column;
11+
}
12+
13+
#wrapper {
14+
display: flex;
15+
flex-direction: column;
16+
height: 100%;
17+
position: relative;
18+
}
19+
20+
#chat-log {
21+
flex-grow: 1;
22+
overflow-y: scroll;
23+
}
24+
25+
#form {
26+
position: absolute;
27+
bottom: 0;
28+
}
29+
30+
.chat-message {
31+
padding: 0.5em;
32+
margin: 0.5em;
33+
background-color: #5036a3;
34+
border-radius: 1em;
35+
margin-right: 20%;
36+
color: white;
37+
border-bottom-left-radius: 0;
38+
}
39+
40+
.chat-message.self {
41+
background: #f0f0f0;
42+
margin-left: 20%;
43+
margin-right: 0;
44+
background-color: #066ebc;
45+
border-bottom-left-radius: 1em;
46+
border-bottom-right-radius: 0;
47+
}
48+
49+
.chat-message:last-child {
50+
margin-bottom: 100px;
51+
}
52+
.meta {
53+
font-size: 0.8em;
54+
color: #ddd;
55+
font-weight: 300;
56+
}
57+
</style>
58+
<div class="container" id="wrapper">
59+
<div id="chat-log"></div>
60+
<fieldset role="group" id="form">
61+
<input id="chat-message-username" type="text" style="flex-shrink: 2;" placeholder="Username" />
62+
<input id="chat-message-input" type="text" placeholder="Message" />
63+
<input id="chat-message-submit" type="button" value="Send" />
64+
</fieldset>
65+
</div>
66+
67+
{{ room_name|json_script:'room-name' }}
68+
{{ messages|json_script:'messages' }}
69+
70+
<script>
71+
function getUsername() {
72+
return document.querySelector('#chat-message-username').value
73+
}
74+
75+
/**
76+
* Append a message to the chat log.
77+
* @param {Object} data
78+
* @param {string} data.user - The user who sent the message
79+
* @param {string} data.message - The message content
80+
* @param {string} data.timestamp - The timestamp of the message
81+
*/
82+
function appendMessage(data) {
83+
const messageElement = document.createElement('div')
84+
messageElement.innerText = data.message
85+
const currentUsername = getUsername()
86+
const metaDiv = document.createElement('div')
87+
const readableTime = new Date(data.timestamp).toLocaleTimeString()
88+
metaDiv.innerText = ` - ${data.user} @ ${readableTime}`
89+
metaDiv.classList.add('meta')
90+
messageElement.append(metaDiv)
91+
messageElement.classList.add('chat-message')
92+
if (data.user === currentUsername) {
93+
messageElement.classList.add('self')
94+
}
95+
document.querySelector('#chat-log').append(messageElement)
96+
// scroll to the bottom
97+
document.querySelector('#chat-log').scrollTo(0, document.querySelector('#chat-log').scrollHeight)
98+
}
99+
100+
const roomName = JSON.parse(document.getElementById('room-name').textContent)
101+
const messages = JSON.parse(document.getElementById('messages').textContent)
102+
103+
messages.forEach(appendMessage)
104+
105+
const chatSocket = new WebSocket('ws://' + window.location.host + '/ws/' + roomName + '/')
106+
107+
chatSocket.onmessage = function (e) {
108+
const data = JSON.parse(e.data)
109+
appendMessage(data)
110+
}
111+
112+
chatSocket.onclose = function (e) {
113+
console.error('Chat socket closed unexpectedly')
114+
}
115+
116+
document.querySelector('#chat-message-input').focus()
117+
document.querySelector('#chat-message-input').onkeyup = function (e) {
118+
if (e.keyCode === 13) {
119+
// enter, return
120+
document.querySelector('#chat-message-submit').click()
121+
}
122+
}
123+
124+
document.querySelector('#chat-message-submit').onclick = function (e) {
125+
const messageInputDom = document.querySelector('#chat-message-input')
126+
const message = messageInputDom.value
127+
chatSocket.send(
128+
JSON.stringify({
129+
message: message,
130+
user: getUsername()
131+
})
132+
)
133+
messageInputDom.value = ''
134+
}
135+
</script>
136+
{% endblock %}

‎samples/django-channels-redis/app/chat/views.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ def index(request):
99
def room(request, room_name):
1010
latest_20_messages = ChatMessage.objects.filter(
1111
room=room_name).order_by("-timestamp")[:20]
12+
1213
return render(request, "chat/room.html", {
1314
"room_name": room_name,
1415
"messages": [{

0 commit comments

Comments
 (0)