کاربران گرامی در این پروژه به شما پروژه کاربردی  با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر  پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.

در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه  های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد

ساخت یک چت روم واقعی با استفاده از Node.js و Socket.IO یک پروژه جالب و کاربردی است که به شما امکان می‌دهد تا با استفاده از فناوری‌های وب، یک اپلیکیشن چت آنلاین بسازید. در این پروژه، کاربران می‌توانند به یک چت روم بپیوندند، پیام‌ها را ارسال و دریافت کنند و به صورت همزمان با یکدیگر چت کنند.

 

### ویژگی‌های اصلی پروژه

1. **چت آنلاین**: کاربران می‌توانند پیام‌ها را به صورت آنی ارسال و دریافت کنند.

2. **لیست کاربران**: نمایش لیستی از کاربرانی که در اتاق چت حضور دارند.

3. **رابط کاربری ساده**: طراحی کاربرپسند و آسان.

 

### کد منبع نمونه

 

#### ۱. ساختار پوشه‌ها

ابتدا پوشه‌ای برای پروژه خود ایجاد کنید و ساختار زیر را دنبال کنید:

 

```

chatroom/

│

├── public/

│   ├── index.html

│   ├── style.css

│   └── script.js

│

├── server.js

├── package.json

└── package-lock.json

```

 

#### ۲. نصب وابستگی‌ها

در پوشه پروژه، از دستور زیر برای ایجاد یک پروژه Node.js و نصب `express` و `socket.io` استفاده کنید:

 

```bash

npm init -y

npm install express socket.io

```

 

#### ۳. ایجاد فایل سرور

فایل `server.js` را ایجاد کرده و کد زیر را در آن قرار دهید:

 

```javascript

const express = require('express');

const http = require('http');

const socketIo = require('socket.io');

 

const app = express();

const server = http.createServer(app);

const io = socketIo(server);

 

// تنظیم مسیر برای فایل‌های استاتیک

app.use(express.static('public'));

 

// ذخیره نام کاربران

let users = {};

 

// اتصال به Socket.IO

io.on('connection', (socket) => {

    console.log('یک کاربر متصل شد:', socket.id);

 

    socket.on('joinChat', (username) => {

        users[socket.id] = username;

        socket.broadcast.emit('userJoined', username);

    });

 

    socket.on('sendMessage', (message) => {

        const username = users[socket.id];

        io.emit('receiveMessage', { username, message });

    });

 

    socket.on('disconnect', () => {

        const username = users[socket.id];

        delete users[socket.id];

        socket.broadcast.emit('userLeft', username);

        console.log('یک کاربر قطع اتصال شد:', socket.id);

    });

});

 

// شروع سرور

server.listen(3000, () => {

    console.log('سرور در پورت 3000 در حال اجرا است.');

});

```

 

#### ۴. ایجاد فایل HTML

فایل `public/index.html` را ایجاد کرده و کد زیر را در آن قرار دهید:

 

```html

   

   

   

   

   

چت روم آنلاین

   

    وارد شدن به چت

 

   

 

   

   

```

 

#### ۵. ایجاد فایل CSS

فایل `public/style.css` را ایجاد کرده و کد زیر را در آن قرار دهید:

 

```css

body {

    font-family: Arial, sans-serif;

    text-align: center;

    background-color: #f0f0f0;

    color: #333;

}

 

#chatBox {

    margin-top: 20px;

}

 

#messages {

    height: 300px;

    overflow-y: auto;

    border: 1px solid #ccc;

    padding: 10px;

    background: white;

    margin-bottom: 10px;

}

```

 

#### ۶. ایجاد فایل JavaScript

فایل `public/script.js` را ایجاد کرده و کد زیر را در آن قرار دهید:

 

```javascript

const socket = io();

 

document.getElementById('joinChat').addEventListener('click', () => {

    const username = document.getElementById('username').value;

    if (username) {

        socket.emit('joinChat', username);

        document.getElementById('chatBox').style.display = 'block';

    }

});

 

document.getElementById('sendMessage').addEventListener('click', () => {

    const messageInput = document.getElementById('messageInput');

    const message = messageInput.value;

    if (message) {

        socket.emit('sendMessage', message);

        messageInput.value = '';

    }

});

 

// دریافت پیام‌ها

socket.on('receiveMessage', (data) => {

    const messagesDiv = document.getElementById('messages');

    messagesDiv.innerHTML += `

${data.username}: ${data.message}

`;

    messagesDiv.scrollTop = messagesDiv.scrollHeight; // اسکرول به پایین

});

 

// نمایش پیغام ورود کاربر

socket.on('userJoined', (username) => {

    const messagesDiv = document.getElementById('messages');

    messagesDiv.innerHTML += `

${username} به چت پیوست.

`;

});

 

// نمایش پیغام خروج کاربر

socket.on('userLeft', (username) => {

    const messagesDiv = document.getElementById('messages');

    messagesDiv.innerHTML += `

${username} از چت خارج شد.

`;

});

```

 

### نحوه اجرای پروژه

1. پس از ایجاد همه فایل‌ها، به پوشه پروژه خود بروید.

2. با استفاده از دستور زیر سرور را اجرا کنید:

 

```bash

node server.js

```

 

3. مرورگر خود را باز کنید و به آدرس `http://localhost:3000` بروید.

 

### نتیجه‌گیری

این پروژه یک چت روم آنلاین ساده است که به کاربران امکان می‌دهد پیام‌های خود را به صورت آنی ارسال و دریافت کنند. شما می‌توانید این چت روم را با افزودن ویژگی‌های بیشتری مانند ارسال تصاویر، ایموجی‌ها، و ساختار داده‌های پیچیده‌تر گسترش دهید. همچنین می‌توانید از کتابخانه‌های رابط کاربری مانند Bootstrap یا Materialize CSS برای بهبود ظاهر اپلیکیشن استفاده کنید.