binaryDiv
/
instantchat
1
0
Fork 0
Code Issues 4 Pull Requests Releases Wiki Activity

Compare commits

base: binaryDiv:98c89f0702374d7883eb09673d058acb9aa35654
Branches Tags
binaryDiv:master
binaryDiv:design
...
compare: binaryDiv:36ba716ad808fa946ce3e724384cd7a50de3ea2e
Branches Tags
binaryDiv:master
binaryDiv:design

2 Commits
98c89f0702 ... 36ba716ad8

Author SHA1 Message Date
Lexi / Zoe 36ba716ad8
Client: add ui.js; create Client object from ui.js 2019-01-20 05:01:58 +01:00
Lexi / Zoe e746a4e8ca
Client: rename internal WebSocket event handlers 2019-01-20 05:00:02 +01:00
4 changed files with 67 additions and 38 deletions
Show Stats Expand all files Collapse all files

3
public_html/index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>InstantChat</title> <title>InstantChat</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.3.1.js"></script> <!-- <script src="js/jquery-3.3.1.js"></script> -->
</head> </head>
<body> <body>
@ -13,6 +13,7 @@
<script src="js/settings.js"></script> <script src="js/settings.js"></script>
<script src="js/client.js"></script> <script src="js/client.js"></script>
<script src="js/ui.js"></script>
</body> </body>
</html> </html>

87
public_html/js/client.js
View File

@ -4,55 +4,76 @@ class Client {
constructor(wsUri) { constructor(wsUri) {
this.wsUri = wsUri; this.wsUri = wsUri;
// Create WebSocket and set callbacks // Create WebSocket and set internal callbacks
console.log("Initialize Client...") console.log("Initialize Client...")
this.webSocket = new WebSocket(wsUri); this.webSocket = new WebSocket(wsUri);
this.webSocket.onopen = this.onOpen.bind(this); this.webSocket.onopen = this._onSocketOpen.bind(this);
this.webSocket.onclose = this.onClose.bind(this); this.webSocket.onclose = this._onSocketClose.bind(this);
this.webSocket.onmessage = this.onMessage.bind(this); this.webSocket.onerror = this._onSocketError.bind(this);
this.webSocket.onerror = this.onError.bind(this); this.webSocket.onmessage = this._onSocketMessage.bind(this);
} }
// WebSocket event handlers // Internal WebSocket event handlers
onOpen(evt) { _onSocketOpen(evt) {
console.log("Connected to " + this.wsUri); console.log("Connected to " + this.wsUri);
// Send init command containing chat ID and nickname // Send init command containing chat ID and nickname
this.sendInit(); this.sendInit();
} }
onClose(evt) { _onSocketClose(evt) {
console.log("Connection closed (code " + evt.code + ")."); console.log("Connection closed (code " + evt.code + ").");
} }
onMessage(evt) { _onSocketError(evt) {
console.log("Received: " + evt.data);
this.parseMessage(evt.data);
}
onError(evt) {
console.error("Connection error: ", evt); console.error("Connection error: ", evt);
} }
// Command senders _onSocketMessage(evt) {
sendInit() { console.log("Received: " + evt.data);
// Define command as JSON object this._parseMessage(evt.data);
let initObj = {
action: "init",
chat_id: "42",
nickname: "binaryDiv"
};
// Send command as JSON string
let initJson = JSON.stringify(initObj);
console.log("Sending init: " + initJson);
this.webSocket.send(initJson);
} }
// Message parsing /**
parseMessage(msgString) { * Sends an arbitrary command as JSON.
*
* commandObj: The command as an object ('action' specifies type of command).
*/
sendCommand(commandObj) {
const commandJson = JSON.stringify(commandObj);
console.log("Sending command: " + commandJson);
this.webSocket.send(commandJson);
}
/**
* Sends the 'init' command which sets up the session. Also sets the chat ID and nickname.
*/
sendInit() {
this.sendCommand({
action: "init",
chat_id: "42",
nickname: "binaryDiv",
});
}
/**
* Sends the 'message' command which sends a chat message to the chat.
*
* msgText: The text of the chat message.
*/
sendChatMessage(msgText) {
this.sendCommand({
action: "message",
text: msgText,
});
}
/**
* Parses an incoming JSON message and dispatches specific events.
*/
_parseMessage(msgString) {
try { try {
let msg = JSON.parse(msgString); const msg = JSON.parse(msgString);
switch (msg.type) { switch (msg.type) {
// Response to "init" command // Response to "init" command
@ -78,9 +99,3 @@ class Client {
} }
} }
} }
// Run script after page is loaded
$(function() {
const wsUri = AppSettings.serverWsUri;
let client = new Client(wsUri);
});

5
public_html/js/settings.js
View File

@ -1,7 +1,10 @@
"use strict"; "use strict";
// Global settings object /**
* Global settings object.
*/
const AppSettings = { const AppSettings = {
// Alternative WebSocket URI for local testing:
// serverWsUri: "ws://localhost:32715", // serverWsUri: "ws://localhost:32715",
serverWsUri: "wss://chat.glitch-in.space:443/ws/", serverWsUri: "wss://chat.glitch-in.space:443/ws/",
}; };

10
public_html/js/ui.js Normal file
View File

@ -0,0 +1,10 @@
"use strict";
// Global object for debugging purposes
let client;
// Execute this on start (wrapped in an anonymous function)
(function() {
const wsUri = AppSettings.serverWsUri;
client = new Client(wsUri);
})();