DEV Community: LoganVoisin

Socket.io Basics

LoganVoisin — Mon, 10 Oct 2022 08:20:06 +0000

Socket.io is web sockets made simple. Web sockets create a path between your client and back end so they can more easily talk to each other. Socket io is primarily composed of emitters and listeners. Emitters emit a signal out to either the client or the server. However, listeners listen for a signal also from either the client or server. Here in this overview view we'll be using a tech stack that consists of Node.js, version 14, Express.js for our server, and React.js as our client.
First up let’s look at the initial setup. We’ll want to make sure we have Node.js and Node Package Manager (npm) installed and up to date. We can check that with the

js which node

command. If you don’t get back a file path for Node.js you need to install it. If you do get a file path and it’s not version 14.x then what you can do is

js npx use 14

that command will change over your node version to version 14.x.
From there we can use Express.js to set up a server and React.js to make out client (see docs here https://expressjs.com/en/starter/hello-world.html , and https://reactjs.org/docs/hello-world.html for help). So we have our Express server set up, lets see what we need to start with Socket.io.

const express = require("express");
const { createServer } = require("http");
const { Server } = require("socket.io");

const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer, { /* options */ });

io.on("connection", (socket) => {
  // ...
});

httpServer.listen(3000);

Okay so what’s happening here? Well, First we create our express server at the top. Then we import, “createServer '' from http and then we import server from Socket.io! That's all pretty normal so far so let’s talk about what's different. So we create an express server and call it an app, then we use that to make a new http server. Now we use that http server to make a new Socket.io server. Okay, not too bad so far… Let’s look at, “io.on(“conection)” This is a listener. It’s looking for a default event called connection. This event is emitted when a user connects to the server, then it creates a new socket for that user! The best part is Socket.io keeps track of the sockets for us.
Let’s talk a little bit more about what a listener is. A listener listens for events, like the name suggests, and it’s identifiable with, “.on”. The first argument is the name of the event it’s listening for and the second argument is a callback that can have data for it’s argument. Here it's a socket which is unique for every user.
So that's how we listen for that event but what if we want to create a custom event? Well we’ll be using React.js for our front end so I’ll give you an example of how that will look.

import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';

const socket = io();

function App() {
  const [isConnected, setIsConnected] = useState(socket.connected);
  const [lastPong, setLastPong] = useState(null);

 useEffect(() => {
    socket.on('connect', () => {
      setIsConnected(true);
    });

  socket.on('disconnect', () => {
      setIsConnected(false);
    });

  socket.on('pong', () => {
      setLastPong(new Date().toISOString());
    });

  return () => {
      socket.off('connect');
      socket.off('disconnect');
      socket.off('pong');
    };
  }, []);

  const sendPing = () => {
    socket.emit('ping');
  }

  return (
    <div>
      <p>Connected: { '' + isConnected }</p>
      <p>Last pong: { lastPong || '-' }</p>
      <button onClick={ sendPing }>Send ping</button>
    </div>
  );
}

export default App;

Here we can see some events being emitted with socket.emit. Socket.emit is how we send out an event to the server with Socket.io!
These are just some of the basics of Socket.io. There is even more to learn from their documentation. Which can be found here at https://socket.io

Usefull Unity Functions

LoganVoisin — Sun, 02 Oct 2022 19:25:20 +0000

Unity is one of many amazing ways to make games. While there is a learning curve most things can be learned rather quickly. However the scripting side of unity can be quite hard even if you know basic programming concepts.There are a lot of unity specific functions that you need to know to be able to do what you want in unity
The first main concept that we need to know is vector math. So a^2 + b^2 = c^2, that is if we think in terms of 2D. With this we can tell unity where to move any game object as long as it’s in 2D. The function for this is Vector2(), if you want to move something in 3d then you'd use Vector3().
Next up is Awake() and Start(). Awake() is called before Start(), and Awake will be called even if a script is disabled. So it’s best used to set up references between game objects. Start() is called before the first update of the game object and only if the script is enabled.
Now we have FixedUpdate and Update. FixedUpdate runs at a constant time so it’s best used for game objects that have physics. Update is called as soon as it can so it's time can vary by a lot.
Up next we have GetButton() and GetKey(). GetButton() is used for controller support and it’s how we detect a button press. GetKey()is how we check for key presses on the keyboard. There's also GetKeyDown() to see when a button was pressed down and GetKeyUp() to see when it was released. We also have OnMouseDown to see when we have clicked a button on the mouse. We can also get the cursor position as well with Input.mousePosition;.
The next helpful funtion to know is transform.LookAt(target);. What this will do is point a game object's transform face another game objects. This is how we could program enemies to look at a player. We could also create a thrid person camera with this function as well. We could do that by making the camera face the player game object.
Then we also have two more functions that go almost hand in hand with one another, Destroy() and Instantiate(). Destroy() removes a spesifyed game object after a certain distance it travils or after a certain amount of time. Instantiate() create a new instance of a prefab game object. It also has many different options you can control, such as it's speed, rotation, position, and many other factors.
What if we want to just disable a component? Well then we could use enabled for that. enabled works like this

void Update ()
    {
        if(Input.GetKeyUp(KeyCode.Space))
        {
            myLight.enabled = !myLight.enabled;
        }
    }

what that will do is when you press space the ling will flip it's enabled status. Allowing you to turn the light off and on.
But, what if you wanted to enable and/or disable game objects? Well then I have the perfict function for you, setActive(). Below is an example of setActive()

public class ActiveObjects : MonoBehaviour
{
    void Start ()
    {
        gameObject.SetActive(false);
    }
}

using this we can enable and/or disable game objects using scripts insted of the unity editor.
Those are just a few of the basic functions that are useful to know when starting unity. There are plenty of others but we don’t have enough time to get into all of them. I hope this can be a good starting point for your unity journey.

How to Survive a Coding Bootcamp

LoganVoisin — Sat, 24 Sep 2022 21:28:20 +0000

In the world of programming a common thing here is coding bootcamps. They are programs that can take anywhere from 15-17 weeks to complete and they are usually high stress with long hours. That means losing sleep and a decline in health right? Well not exactly. It can be that way but it doesn’t have to be. I know we are given all of these different resources that we are supposed to use to help manage stress, but we never get real solutions to the way we feel. We only get wishful thinking and hopes, no results. I’m here to give real solutions to that stress.

First up, sleep. It feels like we can never find a time to sleep when we have deadlines looming over us keeping us awake. We know how important sleep is but, how much should we sleep and how can we make that happen when we are programming for 12 hours a day? Well, it’s recommended that we get between 7 to 9 hours of sleep a night. But, when you have to stay up late to finish a project or squeeze in those last few lines of code it can be hard to get 5 or even 3 hours of sleep. The best fix for this I have found is naps, yes you heard me. Naps are a great way to let your mind and body rest. Since they don’t have to be long to be effective you can take a quick nap during a lunch break and get right back into programming feeling fresh.

Now let's take a look at another huge thing, food. Are we eating enough? It’s really easy to skip meals when you are fixing a bug, or when you’re stuck. But, food is what fuels the brain. So we need to make sure we are eating three meals a day. How can we do this though? We barely have enough time to get work done let alone cook. Well, if you are blessed enough to have a day off during the week I suggest meal prepping. Meal prepping is a great way to make sure you have food to eat during the week! If you don’t have a day off during the week then it may be a little more difficult but I would highly recommend making time to prepare meals for the next few days.

Finally we have one of the biggest things, mental health. It’s so easily forgotten when we are working. We stop looking after ourselves and then we stop taking care of our basic needs. All of this can make you feel like you are spiraling,like there's not enough time in a day. THe best way I have found to ward off these feelings and thoughts is to make sure my basic needs are met and to take short breaks throughout the day. I can not stress this enough, we can only put out our best work when we are healthy and rested. Taking breaks will help you from burning out and feeling drained.

https://www.sleepfoundation.org/how-sleep-works/how-much-sleep-do-we-really-need#:~:text=National%20Sleep%20Foundation%20guidelines1,enable%20their%20growth%20and%20development.

Electron JS Windows setup

LoganVoisin — Mon, 22 Aug 2022 13:52:15 +0000

I’ve had this one terrible problem a long time ago where I could not for the life of me get electron js to work on windows. So, here I am to help anyone else who may be struggling like I was. I hope this can help more than the articles I read.
Okay first up we’ll need node.js that is a must, like in all js projects. Then what well have to do is go to the official electron site to get the download command (you can see it below)

Then you’ll want to have a github account and git installed on your machine.
That covers the prerequisites, now to get into the meat of the topic. When using wsl and windows in combination with electron js there is one step that I missed the first time I installed electron for a project. Here was my pitfall, I missed a crucial step when I was installing electronJS. I was using wsl2! In the instructions to download electron js it specifically warns against this, so use power shell.
So the first steps to getting things tetup is having a directory you want lectron in, we can do this my running this little command here: mkdir my-electron-app && cd my-electron-app
After you run that command you can run npm init. Once that is finished run:npm install electron --save-dev
Then that's all to the setup.The rest of the basics you will need to actually get familiar with electron can be found in the electronjs official site. Thank you for taking the time to read this short article.

https://www.electronjs.org/docs/latest/tutorial/tutorial-first-app