actix/examples
1
0
Fork 0
mirror of https://github.com/actix/examples synced 2025-02-20 00:14:21 +01:00
Code Issues Releases Wiki Activity

remove jquery from broker chat client side

Browse Source
This commit is contained in:
Rob Ede 2020-04-09 03:20:18 +01:00
parent a892a062e1
commit 56443d9e9c
No known key found for this signature in database
GPG Key ID: C2A3B36E841A91E6
1 changed files with 190 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

266
websocket-chat-broker/static/index.html
View File

@ -1,90 +1,204 @@
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8" />
<html> <html>
<head> <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> <meta charset="utf-8" />
</script> <title>Websocket Chat Broker</title>
<script language="javascript" type="text/javascript">
$(function() { <style>
var conn = null; :root {
function log(msg) { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
var control = $('#log'); Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
control.html(control.html() + msg + '<br/>'); font-size: 18px;
control.scrollTop(control.scrollTop() + 1000);
} }
input[type='text'] {
font-size: inherit;
}
#log {
width: 30em;
height: 20em;
overflow: auto;
margin: 0.5em 0;
border: 1px solid black;
}
#status {
padding: 0 0.2em;
}
#text {
width: 17em;
padding: 0.5em;
}
.msg {
margin: 0;
padding: 0.25em 0.5em;
}
.msg--status {
/* a light yellow */
background-color: #ffffc9;
}
.msg--message {
/* a light blue */
background-color: #d2f4ff;
}
.msg--error {
background-color: pink;
}
</style>
</head>
<body>
<h1>Chat!</h1>
<div>
<button id="connect">Connect</button>
<span>Status:</span>
<span id="status">disconnected</span>
</div>
<div id="log"></div>
<form id="chatform">
<input type="text" id="text" />
<input type="submit" id="send" />
</form>
<hr />
<section>
<h2>Commands</h2>
<table style="border-spacing: 0.5em;">
<tr>
<td>
<code>/list</code>
</td>
<td>
list all available rooms
</td>
</tr>
<tr>
<td>
<code>/join name</code>
</td>
<td>
join room, if room does not exist, create new one
</td>
</tr>
<tr>
<td>
<code>/name name</code>
</td>
<td>
set session name
</td>
</tr>
<tr>
<td>
<code>some message</code>
</td>
<td>
just string, send message to all peers in same room
</td>
</tr>
</table>
</section>
<script>
const $status = document.querySelector('#status')
const $connectButton = document.querySelector('#connect')
const $log = document.querySelector('#log')
const $form = document.querySelector('#chatform')
const $input = document.querySelector('#text')
/** @type {WebSocket | null} */
var socket = null
function log(msg, type = 'status') {
$log.innerHTML += `<p class="msg msg--${type}">${msg}</p>`
$log.scrollTop += 1000
}
function connect() { function connect() {
disconnect(); disconnect()
var wsUri = (window.location.protocol=='https:'&&'wss://'||'ws://')+window.location.host + '/ws/';
conn = new WebSocket(wsUri); const { location } = window
log('Connecting...');
conn.onopen = function() { const proto = location.protocol.startsWith('https') ? 'wss' : 'ws'
log('Connected.'); const wsUri = `${proto}://${location.host}/ws/`
update_ui();
}; log('Connecting...')
conn.onmessage = function(e) { socket = new WebSocket(wsUri)
log('Received: ' + e.data);
}; socket.onopen = () => {
conn.onclose = function() { log('Connected')
log('Disconnected.'); updateConnectionStatus()
conn = null; }
update_ui();
}; socket.onmessage = (ev) => {
log('Received: ' + ev.data, 'message')
}
socket.onclose = () => {
log('Disconnected')
socket = null
updateConnectionStatus()
}
} }
function disconnect() { function disconnect() {
if (conn != null) { if (socket) {
log('Disconnecting...'); log('Disconnecting...')
conn.close(); socket.close()
conn = null; socket = null
update_ui();
updateConnectionStatus()
} }
} }
function update_ui() {
var msg = ''; function updateConnectionStatus() {
if (conn == null) { if (socket) {
$('#status').text('disconnected'); $status.style.backgroundColor = 'transparent'
$('#connect').html('Connect'); $status.style.color = 'green'
$status.textContent = `connected`
$connectButton.innerHTML = 'Disconnect'
$input.focus()
} else { } else {
$('#status').text('connected (' + conn.protocol + ')'); $status.style.backgroundColor = 'red'
$('#connect').html('Disconnect'); $status.style.color = 'white'
$status.textContent = 'disconnected'
$connectButton.textContent = 'Connect'
} }
} }
$('#connect').click(function() {
if (conn == null) { $connectButton.addEventListener('click', () => {
connect(); if (socket) {
disconnect()
} else { } else {
disconnect(); connect()
} }
update_ui();
return false; updateConnectionStatus()
}); })
$('#send').click(function() {
var text = $('#text').val(); $form.addEventListener('submit', (ev) => {
log('Sending: ' + text); ev.preventDefault()
conn.send(text);
$('#text').val('').focus(); const text = $input.value
return false;
}); log('Sending: ' + text)
$('#text').keyup(function(e) { socket.send(text)
if (e.keyCode === 13) {
$('#send').click(); $input.value = ''
return false; $input.focus()
} })
});
}); updateConnectionStatus()
</script> </script>
</head> </body>
<body>
<h3>Chat!</h3>
<div>
<button id="connect">Connect</button>&nbsp;|&nbsp;Status:
<span id="status">disconnected</span>
</div>
<div id="log"
style="width:20em;height:15em;overflow:auto;border:1px solid black">
</div>
<form id="chatform" onsubmit="return false;">
<input id="text" type="text" />
<input id="send" type="button" value="Send" />
</form>
</body>
</html> </html>