2023/06/28

Build the socket server with Socket.IO, Express & TypeScript

Node.js

Hi, I’m yamaday0u. (read as “yamada yu”)

Today, I introduce how to start creating socket server with Socket.IO , Express & TypeScript.

You can build a socket server with simple codes.

Contents

Overview
Install libraries
Server initialization
Client Initialization
References

Overview

Environment

Machine：MacBook Air (Retina, 13-inch, 2020)
OS：Monterey 12.6.2（21G320）
npm：8.11.0
node：v16.16.0

Understanding the overall picture of this project

Following tree shows the overall picture of this project.

.
├── client
│   └── index.ts // program for client
├── server
│   └── index.ts // program for server
├── node_modules
├── package-lock.json
└── package.json

We will create client side in order to check the server works well.

You can see this project in my github repository if you want.

Install libraries

First of all, we need to install following libraries.

typescript
express
socket.io
socket.io-client
ts-node

Install these libraries with following commands.

npm install typescript express socket.io socket.io-client ts-node

npm install -D @types/express @types/node

Server initialization

It’s time to build server.

We create it with “express” & “http” with reference to document for Socket.io.

import express from "express";
import { createServer } from "http";
import { Server } from "socket.io";

const app = express();
const httpServer = createServer(app);
const io = new Server(httpServer, { path: "/socket/" });

app.get("/", (req: express.Request, res: express.Response) => {
  res.json({
    message: "root path"
  });
});

io.on("connection", (socket) => {
  console.log("connected");
});

httpServer.listen(3000, () => {
  console.log("Chat server listening on port 3000");
});

Let’s add the commands for starting the server to package.json.

{
  "name": "socket-practice",
  "version": "1.0.0",
  "description": "",
  "main": "server/index.ts",
  "scripts": {
    "server": "ts-node server/index.ts" // add
  }, ...
}

Let’s start the socket server.

npm run server

Client Initialization

The server is running, then we build the client. It’s simply try to connect to the server.

import { io } from "socket.io-client";

const socket = io("http://localhost:3000", { path: "/socket/" });

socket.on("connect", () => {
  console.log("client connected");
});

Add “client” command to package.json for start the client program.

{
  "name": "socket-practice",
  "version": "1.0.0",
  "description": "",
  "main": "server/index.ts",
  "scripts": {
    "server": "ts-node server/index.ts",
    "client": "ts-node client/index.ts" // add
  }, ...
}

Now, start the client.

npm run client

You can see the log message “client connected” which indicates your client has connected to server.

As well as client, the message “connected” appeared on the terminal for server side!

I have posted a follow up article in Japanese!! You can create chat app which works in terminal.

References

Image: Nodejs icon by Icons8

yamaday0uを応援お願いします！あなたの１クリックが励みになります。
>> にほんブログ村