appengine/flexible/ruby31-and-earlier/websockets/views/index.erb (67 lines of code) (raw):
<!-- # Copyright 2018 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.
-->
<!doctype html>
<html>
<head>
<title>Google App Engine Flexible Environment - Python Websockets Chat</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- [START gae_flex_websockets_form] -->
<p>Chat demo</p>
<form id="chat-form">
<textarea id="chat-text" placeholder="Enter some text..."></textarea>
<button type="submit">Send</button>
</form>
<div>
<p>Messages:</p>
<ul id="chat-response"></ul>
</div>
<div>
<p>Status:</p>
<ul id="chat-status"></ul>
</div>
<!-- [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: '')
+ '/chat';
/* Get elements from the page */
var form = $('#chat-form');
var textarea = $('#chat-text');
var output = $('#chat-response');
var status = $('#chat-status');
/* Helper to keep an activity log on the page. */
function log(text){
status.append($('<li>').text(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('Message received');
output.append($('<li>').text(e.data));
};
websocket.onerror = function(e) {
log('Error (see console)');
console.log(e);
};
/* Handle form submission and send a message to the websocket. */
form.submit(function(e) {
e.preventDefault();
var data = textarea.val();
websocket.send(data);
});
});
// [END gae_flex_websockets_js]
</script>
</body>
</html>