使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室

使用Angular和Node.js、socket.io搭建聊天室及多人聊天室的攻略如下：

环境安装

在开始前，需要安装好以下环境：

• Node.js
• Angular CLI

在命令行中输入以下命令进行安装：

# 安装 Node.js
sudo apt install nodejs
sudo apt install npm

# 安装 Angular CLI
npm install -g @angular/cli

后端

项目初始化

首先，在命令行中执行以下命令，创建一个新的 Node.js 项目：

mkdir socket-chatroom-backend
cd socket-chatroom-backend
npm init -y

然后，安装 socket.io 和 express：

npm install --save socket.io express

编写代码

创建 server.js 文件，并输入以下代码：

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

io.on('connection', (socket) => {
  socket.on('login', (data) => {
    socket.username = data.username;
    io.emit('user joined', socket.username);
  });

  socket.on('chat message', (msg) => {
    io.emit('chat message', `${socket.username}: ${msg}`);
  });

  socket.on('disconnect', () => {
    io.emit('user left', socket.username);
  });
});

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

以上代码创建了一个 Express 应用，并使用 socket.io 实现了聊天室后端的核心功能：接收用户连接、处理用户登录、处理聊天消息、处理用户断开连接。

运行项目

在命令行中执行以下命令，启动 Socket.IO 服务器：

node server.js

至此，后端代码的编写完成。

前端

创建 Angular 项目

首先，在命令行中输入以下命令，创建一个新的 Angular 项目：

ng new socket-chatroom-frontend

然后，进入项目目录，并启动开发服务器：

cd socket-chatroom-frontend
npm start

此时，打开浏览器访问 http://localhost:4200/ 可以看到默认的 Angular 欢迎页面。

编写代码

界面设计

在 app.component.html 文件中，输入以下代码，实现聊天室的界面设计：

<div>
  <h2>Socket.IO Chat</h2>
  <div>
    <input type="text" [value]="username" (input)="username=$event.target.value" placeholder="Your name">
    <button (click)="login()">Login</button>
  </div>
  <div *ngIf="isLoggedIn">
    <div>
      <div *ngFor="let message of messages">
        {{ message }}
      </div>
    </div>
    <div>
      <input type="text" [(ngModel)]="message" placeholder="Your message">
      <button (click)="send()">Send</button>
    </div>
  </div>
</div>

以上代码实现了聊天室的登录界面、消息列表和发送消息的功能。

TypeScript 代码

在 app.component.ts 文件中，输入以下代码，实现聊天室的核心功能：

import { Component } from '@angular/core';
import * as io from 'socket.io-client';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private socketClient: SocketIOClient.Socket;
  private isLoggedIn = false;
  private messages: string[] = [];
  private message = '';
  private username = '';

  constructor() {
    this.socketClient = io('http://localhost:3000');

    this.socketClient.on('user joined', (username) => {
      this.messages.push(`${username} joined the chat`);
    });

    this.socketClient.on('user left', (username) => {
      this.messages.push(`${username} left the chat`);
    });

    this.socketClient.on('chat message', (message) => {
      this.messages.push(message);
    });
  }

  login() {
    this.socketClient.emit('login', { username: this.username });
    this.isLoggedIn = true;
  }

  send() {
    if (this.message) {
      this.socketClient.emit('chat message', this.message);
      this.message = '';
    }
  }
}

以上代码实现了聊天室的核心功能：连接 Socket.IO 服务器、处理用户登录、处理聊天消息、实时更新消息列表。

运行项目

在命令行中执行以下命令，启动前端项目：

npm start

然后，打开浏览器访问 http://localhost:4200/，即可使用聊天室功能。

示例说明

示例 1

假设有两个用户 A 和 B，他们都进入了聊天室。A 发送了一条消息 "Hello"，B 立即能够收到这条消息，并在消息列表中显示 "A: Hello"。

示例 2

假设有三个用户 A、B 和 C，他们都进入了聊天室。C 进行登录操作，输入共享密码，管理员同意后C加入聊天室。A 发送了一条消息 "How are you today?"，B 和 C 立即能够收到这条消息，并在消息列表中显示 "A: How are you today?"。当 C 感到这句话有意思，定位消息进行回答时，A 离开了聊天室。B 和 C 立即收到系统提示，"A left the chat"。