Skip to content
Snippets Groups Projects
Commit 8ad1d1a0 authored by Jake Dreher's avatar Jake Dreher
Browse files

1-develop-web-socket-code - Run prettier

parent 264efe0c
No related branches found
No related tags found
1 merge request!61-develop-web-socket-code - There were issues with the previous Websocket...
Show whitespace changes
Inline Side-by-side
README.md
+ 1
− 1
View file @ 8ad1d1a0
...@@ -12,10 +12,10 @@ This is a repository for the CS375 Web Development course at Drexel University. ...@@ -12,10 +12,10 @@ This is a repository for the CS375 Web Development course at Drexel University.
- [ ] Chat - Chat with other players in the waiting room - [ ] Chat - Chat with other players in the waiting room
- [ ] Skins - Customizable snake skins - [ ] Skins - Customizable snake skins
## Rooms ## Rooms
When a user creates a room, update internal data table to reflect new room. Send message to client containing all available rooms, and whether they are private or public. User can set a password for the private rooms. When a user creates a room, update internal data table to reflect new room. Send message to client containing all available rooms, and whether they are private or public. User can set a password for the private rooms.
<!-- <!--
## Getting started ## Getting started
......
app.js
+ 92
− 86
View file @ 8ad1d1a0
const express = require('express') const express = require("express");
const { WebSocketServer } = require('ws') const { WebSocketServer } = require("ws");
const webserver = express() const webserver = express()
.use((_, res) => .use((_, res) => res.sendFile("/index.html", { root: `${__dirname}/public` }))
res.sendFile('/index.html', { root: `${__dirname}/public` }) .listen(3000, () => console.log(`Listening on ${3000}`));
)
.listen(3000, () => console.log(`Listening on ${3000}`))
const sockserver = new WebSocketServer({ port: 3001 }) const sockserver = new WebSocketServer({ port: 3001 });
// Maintain a list of connections // Maintain a list of connections
// This will eventually map connections to lobby or game instances // This will eventually map connections to lobby or game instances
let connections = [] let connections = [];
let gameBoard = [ [0, 0, 0, 0, 0, 0, 0, 0, 0], let gameBoard = [
[0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0], [0, 1, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0] ] [0, 0, 0, 0, 0, 0, 0, 0, 0],
];
let moveHandler = (connection, message) => { let moveHandler = (connection, message) => {
console.log('Received move: ' + message.data) console.log("Received move: " + message.data);
let movement = message.data; let movement = message.data;
for (var i = 0; i < gameBoard.length; i++) { for (var i = 0; i < gameBoard.length; i++) {
...@@ -31,7 +31,11 @@ let moveHandler = (connection, message) => { ...@@ -31,7 +31,11 @@ let moveHandler = (connection, message) => {
return; return;
} }
if(movement === "down" && gameBoard[i][j] === 1 && i < gameBoard.length - 1) { if (
movement === "down" &&
gameBoard[i][j] === 1 &&
i < gameBoard.length - 1
) {
gameBoard[i][j] = 0; gameBoard[i][j] = 0;
gameBoard[i + 1][j] = 1; gameBoard[i + 1][j] = 1;
return; return;
...@@ -43,54 +47,58 @@ let moveHandler = (connection, message) => { ...@@ -43,54 +47,58 @@ let moveHandler = (connection, message) => {
return; return;
} }
if(movement === "right" && gameBoard[i][j] === 1 && j < gameBoard[0].length - 1) { if (
movement === "right" &&
gameBoard[i][j] === 1 &&
j < gameBoard[0].length - 1
) {
gameBoard[i][j] = 0; gameBoard[i][j] = 0;
gameBoard[i][j + 1] = 1; gameBoard[i][j + 1] = 1;
return; return;
} }
} }
} }
} };
sockserver.on('connection', connection => { sockserver.on("connection", (connection) => {
console.log('New client connected!') console.log("New client connected!");
connections.push(connection) connections.push(connection);
connection.on('close', () => { connection.on("close", () => {
connections = connections.filter(curr => curr !== connection) connections = connections.filter((curr) => curr !== connection);
console.log('Client has disconnected!') console.log("Client has disconnected!");
}); });
connection.on('message', (event) => { connection.on("message", (event) => {
try { try {
let message = JSON.parse(event) let message = JSON.parse(event);
// All messages are expected to have a type // All messages are expected to have a type
if (message.type === 'move') { if (message.type === "move") {
console.log('Received move: ' + message.data) console.log("Received move: " + message.data);
moveHandler(connection, message) moveHandler(connection, message);
connection.send(JSON.stringify({ type: 'gameBoard', data: gameBoard })) connection.send(JSON.stringify({ type: "gameBoard", data: gameBoard }));
} else if (message.type === 'chat') { } else if (message.type === "chat") {
console.log('Received chat: ' + message.data) console.log("Received chat: " + message.data);
} else if (message.type === 'join') { } else if (message.type === "join") {
console.log('Received join: ' + message.data) console.log("Received join: " + message.data);
connection.send(JSON.stringify({ type: 'gameBoard', data: gameBoard })) connection.send(JSON.stringify({ type: "gameBoard", data: gameBoard }));
} else if (message.type === 'leave') { } else if (message.type === "leave") {
console.log('Received leave: ' + message.data) console.log("Received leave: " + message.data);
} else { } else {
console.log('Received: ' + message) console.log("Received: " + message);
} }
} catch (e) { } catch (e) {
console.log('Error parsing JSON: ' + message) console.log("Error parsing JSON: " + message);
} }
}) });
connection.onerror = function () { connection.onerror = function () {
console.log('websocket error') console.log("websocket error");
} };
}) });
console.log('Server started.') console.log("Server started.");
// Game loop // Game loop
//setInterval(() => { //setInterval(() => {
...@@ -99,5 +107,3 @@ console.log('Server started.') ...@@ -99,5 +107,3 @@ console.log('Server started.')
// connection.send('Hello, world!') // connection.send('Hello, world!')
// }) // })
//}, 1000); //}, 1000);
package.json
+ 20
− 20
View file @ 8ad1d1a0
public/index.html
+ 109
− 107
View file @ 8ad1d1a0
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<title>WebSocket Example</title> <title>WebSocket Example</title>
</head> </head>
<body> <body>
<h1>WebSocket Client</h1> <h1>WebSocket Client</h1>
<input type="text" <input type="text" id="messageInput" placeholder="Type a message..." />
id="messageInput" <button id="sendButton">Send</button>
placeholder="Type a message..." /> <div id="messages"></div>
<button id="sendButton">
Send
</button>
<div id="messages">
</div>
<div id="game"> <div id="game">
<canvas id="gameCanvas" width="800" height="600"></canvas> <canvas id="gameCanvas" width="800" height="600"></canvas>
</div> </div>
<script> <script>
const joinMessage = {type: 'join', data: 'Hello, server'}; const joinMessage = { type: "join", data: "Hello, server" };
const socket = new WebSocket('ws://127.0.0.1:3001'); const socket = new WebSocket("ws://127.0.0.1:3001");
const canvas = document.getElementById('gameCanvas'); const canvas = document.getElementById("gameCanvas");
const width = canvas.width; const width = canvas.width;
const height = canvas.height; const height = canvas.height;
let moveMessage = {type: 'move', data: 'up'}; let moveMessage = { type: "move", data: "up" };
let gameBoardHandler = (event) => { let gameBoardHandler = (event) => {
let ctx = canvas.getContext('2d'); let ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, width, height); ctx.clearRect(0, 0, width, height);
ctx.fillStyle = 'black'; ctx.fillStyle = "black";
ctx.fillRect(0, 0, width, height); ctx.fillRect(0, 0, width, height);
ctx.fillStyle = 'white'; ctx.fillStyle = "white";
let board = event.data; let board = event.data;
...@@ -45,30 +39,40 @@ ...@@ -45,30 +39,40 @@
for (let i = 0; i < board.length; i++) { for (let i = 0; i < board.length; i++) {
for (let j = 0; j < board[i].length; j++) { for (let j = 0; j < board[i].length; j++) {
if (board[i][j] === 0) { if (board[i][j] === 0) {
ctx.fillRect(j * widthStep + 1, i * heightStep + 1, widthStep-2, heightStep-2); ctx.fillRect(
j * widthStep + 1,
i * heightStep + 1,
widthStep - 2,
heightStep - 2,
);
} }
if (board[i][j] === 1) { if (board[i][j] === 1) {
ctx.fillStyle = 'red'; ctx.fillStyle = "red";
ctx.fillRect(j * widthStep + 1, i * heightStep + 1, widthStep-2, heightStep-2); ctx.fillRect(
ctx.fillStyle = 'white'; j * widthStep + 1,
i * heightStep + 1,
widthStep - 2,
heightStep - 2,
);
ctx.fillStyle = "white";
} }
} }
} }
}; };
socket.addEventListener('open', () => { socket.addEventListener("open", () => {
console.log('Connected to server'); console.log("Connected to server");
socket.send(JSON.stringify(joinMessage)); socket.send(JSON.stringify(joinMessage));
}); });
socket.addEventListener('message', (event) => { socket.addEventListener("message", (event) => {
try { try {
let msg = JSON.parse(event.data); let msg = JSON.parse(event.data);
if(msg.type === 'gameBoard') { if (msg.type === "gameBoard") {
gameBoardHandler(msg); gameBoardHandler(msg);
} else { } else {
const messages = document.getElementById('messages'); const messages = document.getElementById("messages");
const messageElement = document.createElement('div'); const messageElement = document.createElement("div");
messageElement.innerText = event.data; messageElement.innerText = event.data;
messages.appendChild(messageElement); messages.appendChild(messageElement);
} }
...@@ -77,33 +81,31 @@ ...@@ -77,33 +81,31 @@
} }
}); });
document.addEventListener('keydown', (event) => { document.addEventListener("keydown", (event) => {
if(event.key === 'ArrowUp') { if (event.key === "ArrowUp") {
moveMessage.data = 'up'; moveMessage.data = "up";
socket.send(JSON.stringify(moveMessage)); socket.send(JSON.stringify(moveMessage));
} }
if(event.key === 'ArrowDown') { if (event.key === "ArrowDown") {
moveMessage.data = 'down'; moveMessage.data = "down";
socket.send(JSON.stringify(moveMessage)); socket.send(JSON.stringify(moveMessage));
} }
if(event.key === 'ArrowLeft') { if (event.key === "ArrowLeft") {
moveMessage.data = 'left'; moveMessage.data = "left";
socket.send(JSON.stringify(moveMessage)); socket.send(JSON.stringify(moveMessage));
} }
if(event.key === 'ArrowRight') { if (event.key === "ArrowRight") {
moveMessage.data = 'right'; moveMessage.data = "right";
socket.send(JSON.stringify(moveMessage)); socket.send(JSON.stringify(moveMessage));
} }
}); });
document.getElementById('sendButton').addEventListener('click', () => { document.getElementById("sendButton").addEventListener("click", () => {
const messageInput = document.getElementById('messageInput'); const messageInput = document.getElementById("messageInput");
const message = messageInput.value; const message = messageInput.value;
socket.send(message); socket.send(message);
messageInput.value = ''; messageInput.value = "";
}); });
</script> </script>
</body> </body>
</html> </html>
src/game/gameLogic.js
+ 12
− 9
View file @ 8ad1d1a0
...@@ -21,7 +21,10 @@ function gen(arr) { ...@@ -21,7 +21,10 @@ function gen(arr) {
array = gen(array); array = gen(array);
//Place snake into array grid //Place snake into array grid
var snake = [{ x: 15, y: 10 }, { x: 15, y: 11}]; var snake = [
{ x: 15, y: 10 },
{ x: 15, y: 11 },
];
function placeSnake(arr, row, col) { function placeSnake(arr, row, col) {
if (arr[row] && arr[row][col] !== undefined) { if (arr[row] && arr[row][col] !== undefined) {
......
src/game/index.js
+ 17
− 17
View file @ 8ad1d1a0
const BACKGROUND_COLOR = '#27ae60'; const BACKGROUND_COLOR = "#27ae60";
const SNAKE_COLOR = '#3498db'; const SNAKE_COLOR = "#3498db";
const FOOD_COLOR = '#e74c3c'; const FOOD_COLOR = "#e74c3c";
const gameScreen = document.getElementById('gameScreen'); const gameScreen = document.getElementById("gameScreen");
let canvas, element; let canvas, element;
...@@ -36,8 +36,8 @@ const gameState = { ...@@ -36,8 +36,8 @@ const gameState = {
//Initialize the game elements such as canvas size, color, etc. //Initialize the game elements such as canvas size, color, etc.
function init() { function init() {
canvas = document.createElement('canvas'); canvas = document.createElement("canvas");
element = canvas.getContext('2d'); element = canvas.getContext("2d");
canvas.width = 600; canvas.width = 600;
canvas.height = 600; canvas.height = 600;
...@@ -46,7 +46,7 @@ function init(){ ...@@ -46,7 +46,7 @@ function init(){
gameScreen.appendChild(canvas); gameScreen.appendChild(canvas);
document.addEventListener('keydown', keydown); document.addEventListener("keydown", keydown);
} }
//Here is where we will implement movement/direction logic. The server is not implemented yet so we just use console.log(event.keyCode) to represent keys pressed //Here is where we will implement movement/direction logic. The server is not implemented yet so we just use console.log(event.keyCode) to represent keys pressed
......
tests/websocket.test.js
+ 47
− 55
View file @ 8ad1d1a0
let WebSocketClient = require("websocket").client;
let WebSocketClient = require('websocket').client;
let createClient = (port, hostname, protocol) => { let createClient = (port, hostname, protocol) => {
let WebSocketClient = require('websocket').client; let WebSocketClient = require("websocket").client;
let client = new WebSocketClient(); let client = new WebSocketClient();
client.on('connectFailed', (error) => { client.on("connectFailed", (error) => {
console.log('Connect Error: ' + error.toString()); console.log("Connect Error: " + error.toString());
}); });
client.on('connect', (connection) => { client.on("connect", (connection) => {
console.log('WebSocket Client Connected'); console.log("WebSocket Client Connected");
connection.on('error', (error) => { connection.on("error", (error) => {
console.log("Connection Error: " + error.toString()); console.log("Connection Error: " + error.toString());
}); });
connection.on('close', () => { connection.on("close", () => {
console.log(`${protocol} Connection Closed`); console.log(`${protocol} Connection Closed`);
}); });
connection.on('message', (message) => { connection.on("message", (message) => {
if (message.type === 'utf8') { if (message.type === "utf8") {
console.log("Received: '" + message.utf8Data + "'"); console.log("Received: '" + message.utf8Data + "'");
} }
}); });
}); });
client.connect(`ws://${hostname}:${port}/`, protocol); client.connect(`ws://${hostname}:${port}/`, protocol);
} };
test('start websocket server', () => { test("start websocket server", () => {
let ConnectionController = require("../src/route/connectionController");
let ConnectionController = require('../src/route/connectionController'); let wsServer = ConnectionController.startServer(8080, "localhost");
let wsServer = ConnectionController.startServer(8080, 'localhost');
expect(wsServer).toBeDefined(); expect(wsServer).toBeDefined();
expect(wsServer.server).toBeDefined(); expect(wsServer.server).toBeDefined();
expect(wsServer.app).toBeDefined(); expect(wsServer.app).toBeDefined();
...@@ -41,18 +38,13 @@ test('start websocket server', () => { ...@@ -41,18 +38,13 @@ test('start websocket server', () => {
console.log(wsServer.server); console.log(wsServer.server);
let shutdown = () => { let shutdown = () => {
wsServer.server.closeAllConnections(); wsServer.server.closeAllConnections();
wsServer.server.shutDown(); wsServer.server.shutDown();
wsServer.app.close(); wsServer.app.close();
} };
let client = createClient(8080, 'localhost', 'echo-protocol');
let client = createClient(8080, "localhost", "echo-protocol");
shutdown(); shutdown();
}); });
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment