Bina ruang sembang dengan nodejs-Soal Jawab bahagian hadapan-php.cn

Dengan perkembangan pesat Internet, cara orang berkomunikasi antara satu sama lain juga sentiasa berubah. Bilik sembang ialah aplikasi pemesejan segera dalam talian yang membolehkan pengguna berkomunikasi dan bertukar maklumat dalam masa nyata, tanpa mengira sekatan geografi atau zon waktu. Terdapat banyak cara untuk melaksanakan bilik sembang Artikel ini akan memperkenalkan cara membina bilik sembang dengan nodej.

1. Prinsip pelaksanaan asas ruang sembang

Bilik sembang ialah sistem pemesejan segera berasaskan rangkaian, dan prinsip pelaksanaannya sangat mudah. Apabila pengguna memasuki bilik sembang, pengguna perlu menyambung ke pelayan sembang terlebih dahulu, dan pelayan akan menambah maklumat sambungan pengguna ke senarai pengguna ruang sembang. Apabila pengguna menghantar mesej ke bilik sembang, pelayan menyiarkan mesej kepada semua pengguna dalam bilik sembang. Selain itu, pelayan juga perlu memantau status sambungan pengguna dan maklumat pengguna terputus dalam masa nyata.

2. Persediaan

Sebelum anda mula membuat ruang sembang, pastikan anda telah memasang nodejs dan npm Jika tidak, anda boleh pergi ke tapak web rasmi nodejs untuk memuat turun dan memasangnya.

3. Bina bahagian pelayan bilik sembang

Buat projek

Pertama, kita perlu mencipta projek bilik sembang di tempatan persekitaran, dan Muat turun beberapa modul yang diperlukan. Mula-mula buat direktori projek dalam baris arahan dan masukkan:

mkdir myChatRoom
cd myChatRoom

Salin selepas log masuk

Kemudian gunakan npm untuk memulakan projek:

npm init

Salin selepas log masuk

Seterusnya, pasang modul yang anda perlu gunakan:

npm i express socket.io -S

Salin selepas log masuk

Dalam arahan di atas :

express ialah rangka kerja web nodejs yang biasa digunakan untuk mengendalikan permintaan dan respons HTTP.
socket.io ialah perpustakaan komunikasi masa nyata berdasarkan enkapsulasi websocket.

Pelaksanaan kod sebelah pelayan

Dalam direktori akar projek, buat fail index.js dan tampal kod berikut ke dalamnya:

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

app.use(express.static(__dirname + '/public'));

const onlineUsers = {};
const onlineCount = 0;

io.on('connection', (socket) => {
  console.log('a user connected');

  socket.on('login', (user) => {
    socket.nickname = user.username;
    // check if the user already exists
    if (!onlineUsers.hasOwnProperty(socket.nickname)) {
      onlineUsers[socket.nickname] = user.avatar;
      onlineCount++;
    }

    io.emit('login', { onlineUsers, onlineCount, user });
    console.log(`user ${user.username} joined`);
  });

  socket.on('chatMessage', (msg) => {
    io.emit('chatMessage', { nickname: socket.nickname, message: msg });
  });

  socket.on('disconnect', () => {
    if (onlineUsers.hasOwnProperty(socket.nickname)) {
      const userLeft = { username: socket.nickname, avatar: onlineUsers[socket.nickname] };
      delete onlineUsers[socket.nickname];
      onlineCount--;

      io.emit('logout', { onlineUsers, onlineCount, user: userLeft });
      console.log(`user ${userLeft.username} left`);
    }
  });
});

http.listen(3000, () => {
  console.log('listening on *:3000');
});

Salin selepas log masuk

Dalam kod di atas, kami memulakan pelayan http dan menaik taraf perkhidmatan HTTP menggunakan socket.io untuk menyokong websocket. Kemudian kita dapat melihat bahawa kita telah menentukan beberapa peristiwa soket:

Apabila terdapat sambungan Soket baharu, pelayan akan menghantar acara sambungan dan kami akan mengeluarkan "seorang pengguna yang disambungkan".
Apabila pengguna log masuk, pelayan akan menghantar acara log masuk dan menambah maklumat pengguna pada senarai pengguna dalam talian, dan kemudian pelayan akan menyiarkan senarai pengguna dalam talian kepada pengguna lain.
Apabila pengguna menghantar mesej, pelayan menghantar acara chatMessage dan menyiarkan mesej kepada semua pengguna dalam talian.
Apabila pengguna memutuskan sambungan, pelayan akan menghantar acara putus sambungan dan memadamkan pengguna daripada senarai pengguna dalam talian.

4. Bina klien bilik sembang

Buat fail html

Buat fail html dalam direktori awam projek, dan Salin kod berikut ke dalam fail:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chatroom</title>
    <style>
        #nickname {
            display: none;
        }

        #messages {
            height: 300px;
            overflow-y: scroll;
            margin-bottom: 10px;
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        li {
            margin-top: 10px;
        }

        img {
            width: 30px;
            height: 30px;
            vertical-align: middle;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div id="loginPanel">
    <p>输入一个昵称:</p>
    <input type="text" id="nicknameInput">
    <button id="submit">进入聊天室</button>
</div>
<div id="chatroom" style="display:none;">
    <div id="nickWrapper">
        <img id="avatarImg" src=""/>
        <span id="nickname"></span>
        <button id="logout">退出聊天室</button>
    </div>
    <div id="messages"></div>
    <input type="text" id="messageInput" placeholder="请输入聊天信息">
    <button id="sendBtn">发送</button>
</div>

<script src="./socket.io/socket.io.js"></script>
<script src="./chat.js"></script>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami menambah kotak input nama panggilan, butang untuk memasuki bilik sembang, butang untuk keluar dari bilik sembang dan ID dengan "mesej " kepada elemen HTML, kotak input untuk menghantar mesej dan butang untuk menghantar mesej. Antaranya, kotak input nama panggilan dan butang untuk masuk ke ruang sembang disembunyikan selepas memasuki ruang sembang, dan nama panggilan dan avatar pengguna dalam talian dipaparkan.

Buat kod JS pelanggan bilik sembang

Buat fail chat.js dalam direktori awam dan tampal kod berikut ke dalamnya:

const socket = io();
const submitBtn = document.querySelector('#submit');
const logoutBtn = document.querySelector('#logout');
const sendBtn = document.querySelector('#sendBtn');
const messageInput = document.querySelector('#messageInput');
const nicknameInput = document.querySelector('#nicknameInput');
const chatWrapper = document.querySelector('#chatroom');
const loginPanel = document.querySelector('#loginPanel');
const avatarImg = document.querySelector('#avatarImg');
const nickname = document.querySelector('#nickname');
const messages = document.querySelector('#messages');

let avatar;


// 提交昵称登录
submitBtn.addEventListener('click', function () {
  const nickname = nicknameInput.value;
  if (nickname.trim().length > 0) {
    avatar = `https://avatars.dicebear.com/api/bottts/${Date.now()}.svg`;
    socket.emit('login', { username: nickname, avatar: avatar });
  } else {
    alert('昵称为空，请重新输入');
    nicknameInput.value = '';
    nicknameInput.focus();
  }
});

// 退出登录
logoutBtn.addEventListener('click', function () {
  socket.disconnect();
});

// 发送消息
sendBtn.addEventListener('click', function () {
  const msg = messageInput.value.trim();
  if (msg.length > 0) {
    socket.emit('chatMessage', msg);
    messageInput.value = '';
    messageInput.focus();
  }
});

// 回车发送消息
messageInput.addEventListener('keyup', function (e) {
  e.preventDefault();
  if (e.keyCode === 13) {
    sendBtn.click();
  }
});

// 服务器发送登录信号
socket.on('login', (info) => {
  loginPanel.style.display = 'none';
  chatWrapper.style.display = 'block';
  avatarImg.src = avatar;
  nickname.innerText = nicknameInput.value;
  renderUserList(info.onlineUsers);
});

// 服务器发送聊天消息信号
socket.on('chatMessage', (data) => {
  renderChatMessage(data.nickname, data.message);
});

// 服务器发送退出信号
socket.on('logout', (info) => {
  renderUserList(info.onlineUsers);
});

// 渲染在线用户列表
function renderUserList(users) {
  const list = document.createElement('ul');
  Object.keys(users).forEach((nickname) => {
    const item = `
    <li>
      <img src="${users[nickname]}"/>
      <span>${nickname}</span>
    </li>
    `;
    list.innerHTML += item;
  });
  chatWrapper.insertBefore(list, messages);
}

// 渲染聊天消息
function renderChatMessage(nickname, message) {
  const msg = document.createElement('div');
  msg.innerHTML = `<p>${nickname}: ${message}</p>`;
  messages.appendChild(msg);
}

Salin selepas log masuk

Dalam kod di atas, kami telah melaksanakan fungsi berikut:

Apabila pengguna mengklik butang "Log Masuk", acara "log masuk" dihantar ke pelayan, dan pelayan diamanahkan untuk menambah pengguna ke senarai "Pengguna Dalam Talian" secara dalaman, dan tolak senarai "pengguna dalam talian" semasa kepada semua pelanggan melalui siaran.
Apabila terdapat mesej sembang, pelayan akan menghantar acara "chatMessage" dan menolak kandungan mesej itu kepada semua pelanggan melalui siaran.
Apabila pengguna memutuskan sambungan, "Senarai Pengguna Dalam Talian" akan mengalih keluar pengguna daripada senarai pengguna dan menolak senarai "Pengguna Dalam Talian" semasa kepada semua pelanggan melalui siaran.

5. Jalankan projek

Pergi ke direktori akar projek pada baris arahan dan masukkan arahan berikut untuk memulakan projek:

node index.js

Salin selepas log masuk

Kemudian masukkan http dalam pelayar ://localhost:3000/ Akses pelayan dan masuk ke bilik sembang.

6. Ringkasan

Dalam artikel ini, kami melaksanakan ruang sembang ringkas berdasarkan nodejs dan socket.io, yang menyediakan cara yang mudah, stabil dan cekap. Walaupun ini hanyalah ruang sembang yang sangat asas, saya percaya bahawa pembaca boleh mempunyai pemahaman umum tentang membina bilik sembang dengan nodejs melalui pengenalan dan amalan artikel ini.

Atas ialah kandungan terperinci Bina ruang sembang dengan nodejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!