Skip to content

Simple Html/Javascript client to the akka ws server #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
javadba wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Simple Html/Javascript client to the akka ws server #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
88f44e7
Fixed Server.scala to use the configured port
javadba Jun 22, 2016
1db048b
Add simple html/js client
javadba Jun 22, 2016
60802bc
Add credit for the html to the original blog
javadba Jun 22, 2016
b8100bb
Slightly improved sample html page layout
javadba Jun 22, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/main/scala/io/scalac/akka/http/websockets/Server.scala
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ object Server extends App {
private def alternativelyRunTheClient(): Unit = {

if (args.head.equalsIgnoreCase("with-client")) {
val c: WSClient = WSClient("http://localhost:8080/ws-chat/123?name=HAL1000", "HAL1000")
val c: WSClient = WSClient(s"http://localhost:${port}/ws-chat/123?name=HAL1000", "HAL1000")

if (c.connectBlocking())
c.spam("hello message")
Expand Down
88 changes: 88 additions & 0 deletions src/main/webapp/websocket.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<!DOCTYPE html>
<html>
<head>
<title>Akka Based Websocket Server Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
.bottom-three {
padding-top: 15cm;
margin-top: 3cm;
font-size: 50%;
}
</style>
</head>
<body>

<div>
<input type="text" id="messageinput" value="Lorem ipsum .."/>
</div>
<div>
<button type="button" onclick="openSocket();">Open</button>
<button type="button" onclick="send();">Send</button>
<button type="button" onclick="closeSocket();">Close</button>
</div>
<!-- Server responses get written here -->
<div id="messages"><p/>Messages will show below<p/></div>

<!-- Script to utilise the WebSocket -->
<script type="text/javascript">

var webSocket;
var messages = document.getElementById("messages");

function openSocket() {
// Ensures only one connection is open at a time
if (webSocket !== undefined && webSocket.readyState !== WebSocket.CLOSED) {
writeResponse("WebSocket is already opened.");
return;
}
// Create a new instance of the websocket
webSocket = new WebSocket("ws://localhost:8989/ws-chat/123?name=SocketTester");

/**
* Binds functions to the listeners for the websocket.
*/
webSocket.onopen = function (event) {
// For reasons I can't determine, onopen gets called twice
// and the first time event.data is undefined.
// Leave a comment if you know the answer.
if (event.data === undefined)
return;

writeResponse(event.data);
};

webSocket.onmessage = function (event) {
writeResponse(event.data);
};

webSocket.onclose = function (event) {
writeResponse("Connection closed");
};
}

/**
* Sends the value of the text input to the server
*/
function send() {
var text = document.getElementById("messageinput").value;
webSocket.send(text);
}

function closeSocket() {
webSocket.close();
}

function writeResponse(text) {
messages.innerHTML += "<br/>" + text;
}

</script>

</body>
<footer><p class="bottom-three">Html code credit: blog <a
href="https://blog.idrsolutions.com/2013/12/websockets-an-introduction/">WebSockets – A Quick Introduction and a
Sample Application from IDR solutions</a></p>
</footer>
</html>