appengine/flexible/websockets/index.html (79 lines of code) (raw):
<!--
Copyright 2019 Google LLC.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
[START appengine_websockets_index]
-->
<!doctype html>
<html>
<head>
<title>Google App Engine Flexible Environment - PHP Websockets Chat</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #dedede; }
#messages li:last-child { background: #aea; }
section {
background-color: #eee;
border: 3px dashed #888; border-radius: 10px;
margin: 30px; margin-bottom: 80px;
padding: 5px;
}
</style>
</head>
<body>
<!-- [START gae_flex_websockets_form] -->
<h1>Websockets Chat Demo</h1>
<form id="chat-form">
<input type="text" id="chat-text" autocomplete="off" placeholder="Enter some text...">
<button type="submit">Send</button>
</form>
<section>
<ul id="messages"></ul>
</section>
<!-- [END gae_flex_websockets_form] -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
// [START gae_flex_websockets_js]
$(function() {
/* If the main page is served via https, the WebSocket must be served via
"wss" (WebSocket Secure) */
var scheme = window.location.protocol == "https:" ? 'wss://' : 'ws://';
var webSocketUri = scheme
+ window.location.hostname
+ (location.port ? ':'+location.port: '')
+ '/ws';
/* Helper to keep an activity log on the page. */
function log(text, label) {
label = label || 'Status';
$('#messages').append(`<li> <strong>${label}</strong>: ${text}`);
}
/* Establish the WebSocket connection and register event handlers. */
var websocket = new WebSocket(webSocketUri);
websocket.onopen = function() {
log('Connected');
};
websocket.onclose = function() {
log('Closed');
};
websocket.onmessage = function(e) {
log(e.data, 'Message received')
};
websocket.onerror = function(e) {
log('Error (see console)');
console.log(e);
};
/* Handle form submission and send a message to the websocket. */
$('#chat-form').submit(function(e) {
e.preventDefault();
var data = $('#chat-text').val();
if (data) {
websocket.send(data);
window.scrollTo(0, document.body.scrollHeight)
$('#chat-text').val('');
}
});
});
// [END gae_flex_websockets_js]
</script>
</body>
</html>