Ana Sayfa
en

Socket.IO Installation and First Project

Socket.IO Installation and First Project

Socket.IO Installation and First Project

Socket.IO installation and creating the first project is a fundamental step for developers who want to build real-time web applications. Socket.IO is a popular JavaScript library that works on both the server and client sides, making it easy to use WebSocket technology. In this article, you can learn step by step how to install Socket.IO and how to create a simple first Socket.IO project.

What is Socket.IO and What are Its Advantages?

Socket.IO is a library used for establishing real-time, two-way, and event-based communication. It offers WebSocket support, but can automatically fall back to different protocols like long-polling in browser or network restrictions. It is widely used especially in applications such as instant messaging, live notifications, or online games.

How to Install Socket.IO?

Node.js and npm Requirements

To use Socket.IO, you must first have Node.js and npm (Node Package Manager) installed on your computer. You can check by running the following commands:

node -v
npm -v

If Node.js is not installed, you can easily install it from the official Node.js website.

Socket.IO Server Installation

Open the terminal in your project folder and install the Socket.IO and Express libraries by entering the following command:

npm init -y
npm install express socket.io

Creating the First Project with Socket.IO

Server Code (server.js)

Below is a quick example of a working Node.js server with Socket.IO:

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

const app = express();
const server = http.createServer(app);
const io = new Server(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('A new user connected');
  socket.on('message', (msg) => {
    io.emit('message', msg);
  });
});

server.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Client Code (index.html)

You can add the following codes to your index.html file as the Socket.IO client:

<!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO Installation and First Project</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <ul id="messages"></ul>
    <form id="form" action="">
      <input id="input" autocomplete="off" />
      <button>Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io();
      var form = document.getElementById('form');
      var input = document.getElementById('input');
      var messages = document.getElementById('messages');
      form.addEventListener('submit', function(e) {
        e.preventDefault();
        if (input.value) {
          socket.emit('message', input.value);
          input.value = '';
        }
      });
      socket.on('message', function(msg){
        var item = document.createElement('li');
        item.textContent = msg;
        messages.appendChild(item);
        window.scrollTo(0, document.body.scrollHeight);
      });
    </script>
  </body>
</html>

Conclusion: Real-Time Kickoff with Socket.IO

This basic example about Socket.IO installation and the first project is the first step for much larger and more complex real-time applications. Thanks to Socket.IO's quick integration and flexible protocol support, it can be easily used in all projects that require live chat, notifications, and instant data transfer. Now you can start developing your own Socket.IO project!

Yorum Gönder