rtc

minimal webrtc client
git clone git://ce9e.org/rtc

commit
55d7ac380468e430f887481bfb9f051430699780
Author
Tobias Bengfort <tobias.bengfort@posteo.de>
Date
2020-03-21 12:07
chat

Diffstat

A chat/chat.js 63 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
A chat/index.html 21 +++++++++++++++++++++
A chat/style.css 70 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

3 files changed, 154 insertions, 0 deletions


diff --git a/chat/chat.js b/chat/chat.js

@@ -0,0 +1,63 @@
   -1     1 (function() {
   -1     2 	// TODO: nicks
   -1     3 
   -1     4 	var history = document.querySelector('.history');
   -1     5 	var form = document.querySelector('.form');
   -1     6 	var input = document.querySelector('.form input');
   -1     7 
   -1     8 	var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
   -1     9 
   -1    10 	var randomString = function(length) {
   -1    11 		var result = [];
   -1    12 		for (var i = 0; i < length; i++) {
   -1    13 			var k = Math.floor(Math.random() * chars.length);
   -1    14 			result.push(chars[k]);
   -1    15 		}
   -1    16 		return result.join('');
   -1    17 	};
   -1    18 
   -1    19 	form.addEventListener('submit', function(event) {
   -1    20 		event.preventDefault();
   -1    21 		if (!input.value) {
   -1    22 			return;
   -1    23 		}
   -1    24 		var url = 'https://patchbay.pub/pubsub/' + location.hash.substr(1);
   -1    25 		fetch(url, {
   -1    26 			method: 'POST',
   -1    27 			mode: 'cors',
   -1    28 			body: input.value,
   -1    29 		}).then(function() {
   -1    30 			input.value = '';
   -1    31 		});
   -1    32 	});
   -1    33 
   -1    34 	var renderMessage = function(msg) {
   -1    35 		var li = document.createElement('li');
   -1    36 		li.textContent = msg;
   -1    37 		return li;
   -1    38 	};
   -1    39 
   -1    40 	var onServerEvent = function(event) {
   -1    41 		var li = renderMessage(event.data);
   -1    42 		var scrolledToBottom = history.scrollTop + history.offsetHeight === history.scrollHeight;
   -1    43 		history.append(li);
   -1    44 		if (scrolledToBottom) {
   -1    45 			history.scrollTop = history.scrollHeight;
   -1    46 		}
   -1    47 	};
   -1    48 
   -1    49 	// FIXME: prefer server send events
   -1    50 	var poll = function() {
   -1    51 		var url = 'https://patchbay.pub/pubsub/' + location.hash.substr(1);
   -1    52 		fetch(url)
   -1    53 			.then(r => r.text())
   -1    54 			.then(data => onServerEvent({'data': data}))
   -1    55 			.then(poll);
   -1    56 	};
   -1    57 
   -1    58 	if (!location.hash) {
   -1    59 		location.hash = randomString(10);
   -1    60 	}
   -1    61 
   -1    62 	poll();
   -1    63 })();

diff --git a/chat/index.html b/chat/index.html

@@ -0,0 +1,21 @@
   -1     1 <!DOCTYPE html>
   -1     2 <html>
   -1     3 <head>
   -1     4 	<meta charset="utf-8" />
   -1     5 	<title>duct chat</title>
   -1     6 	<meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src https://patchbay.pub">
   -1     7 	<link rel="stylesheet" href="style.css">
   -1     8 </head>
   -1     9 <body>
   -1    10 	<div class="chat">
   -1    11 		<ul class="history">
   -1    12 		</ul>
   -1    13 		<form method="get" class="form">
   -1    14 			<input autofocus>
   -1    15 			<button>Send</button>
   -1    16 		</form>
   -1    17 	</div>
   -1    18 	<script src="chat.js"></script>
   -1    19 </body>
   -1    20 </html>
   -1    21 

diff --git a/chat/style.css b/chat/style.css

@@ -0,0 +1,70 @@
   -1     1 * {
   -1     2 	box-sizing: border-box;
   -1     3 }
   -1     4 
   -1     5 body {
   -1     6 	max-width: 30em;
   -1     7 	margin: 0 auto;
   -1     8 	padding: 1em;
   -1     9 }
   -1    10 
   -1    11 input,
   -1    12 button {
   -1    13 	border: 1px solid #aaa;
   -1    14 	padding: 0.3em 0.75em;
   -1    15 	font-family: inherit;
   -1    16 	font-size: inherit;
   -1    17 	line-height: 1.8;
   -1    18 	border-radius: 0.3em;
   -1    19 	min-width: 0;
   -1    20 }
   -1    21 
   -1    22 button {
   -1    23 	display: inline-block;
   -1    24 	text-align: center;
   -1    25 	border-color: #26c;
   -1    26 	background: #26c;
   -1    27 	color: #fff;
   -1    28 }
   -1    29 button:hover,
   -1    30 button:focus {
   -1    31 	border-color: #25a;
   -1    32 	background: #25a;
   -1    33 }
   -1    34 button:active {
   -1    35 	border-color: blue;
   -1    36 	background: blue;
   -1    37 }
   -1    38 
   -1    39 .chat {
   -1    40 	display: grid;
   -1    41 	grid-template-rows: 1fr min-content;
   -1    42 	grid-gap: 1em;
   -1    43 	min-height: calc(100vh - 2em);
   -1    44 }
   -1    45 
   -1    46 .history {
   -1    47 	flex-grow: 1;
   -1    48 	width: 100%;
   -1    49 	overflow: auto;
   -1    50 	margin: 0;
   -1    51 	padding: 0;
   -1    52 }
   -1    53 
   -1    54 .history li {
   -1    55 	display: block;
   -1    56 	margin: 1em 0;
   -1    57 }
   -1    58 
   -1    59 .form {
   -1    60 	display: grid;
   -1    61 	grid-template-columns: 1fr min-content;
   -1    62 	grid-gap: 1em;
   -1    63 }
   -1    64 
   -1    65 @media (min-width: 30em) {
   -1    66 	.chat {
   -1    67 		padding: 1em;
   -1    68 		border: 1px solid #aaa;
   -1    69 	}
   -1    70 }