实战项目：搭建简单的WebSocket聊天室

# 1. WebSocket简介

## 1.1 什么是WebSocket？

WebSocket是一种在单个TCP连接上进行全双工通信的协议。它是HTML5的一部分，通过浏览器与服务器之间建立持久性的连接，可以实现实时通讯。

## 1.2 WebSocket与传统HTTP的区别

传统的HTTP协议是一种无状态的协议，通讯过程是“请求-响应”的模式。而WebSocket在建立连接后，双方都可以自由地向对方发送数据，互相独立，实现了真正意义上的实时通讯。

## 1.3 WebSocket的优势和应用场景

WebSocket在实时性、双向通讯、减少网络流量等方面有明显的优势，常用于在线聊天、在线游戏、实时数据更新等场景。其优势使之成为了构建实时互动应用的重要技术之一。

# 2. 准备工作

在本章中，我们将详细介绍如何准备工作来搭建WebSocket服务端和客户端。首先，我们将讨论开发环境的准备，然后列出项目所需依赖，并最终创建项目结构。让我们开始吧！

### 2.1 开发环境准备

在开始搭建WebSocket服务端和客户端之前，我们需要确保我们的开发环境已经完全准备就绪。对于本文，我们将使用Node.js作为服务端的开发语言，以及HTML和JavaScript作为客户端的开发语言。因此，确保您的开发环境中已经安装了以下内容：

- Node.js（请确保安装了最新稳定版）
- IDE 或文本编辑器（如VS Code、Sublime Text等）

### 2.2 项目所需依赖

在我们开始创建项目结构之前，让我们先了解一下项目所需的依赖项。对于Node.js服务端，我们将使用`ws`库来实现WebSocket功能。您可以通过以下命令安装`ws`库：

npm install ws

对于客户端，我们不需要安装任何其他依赖项，因为WebSocket在现代浏览器中都有原生支持。

### 2.3 创建项目结构

现在，让我们来创建项目的基本结构。在您选择的工作目录中，创建一个名为`websocket-chat-app`的新文件夹。在该文件夹中，我们将创建以下文件：

- `server.js`：Node.js服务端的主要代码文件
- `index.html`：客户端的HTML文件
- `client.js`：客户端的JavaScript文件

websocket-chat-app/
│
├── server.js
├── index.html
└── client.js

一旦我们完成了这些准备工作，我们就可以继续搭建WebSocket服务端和客户端了。让我们在下一章中开始搭建WebSocket服务端。

希望这些章节能够为你的实战项目提供指导和灵感！

# 3. 搭建WebSocket服务端

WebSocket服务端的搭建是实现实时通讯的关键步骤，下面将介绍如何使用Node.js创建WebSocket服务端，包括实现WebSocket连接与断开以及处理客户端发送的消息。

#### 3.1 使用Node.js创建WebSocket服务端

// 引入WebSocket模块
const WebSocket = require('ws');

// 创建WebSocket服务器
const wss = new WebSocket.Server({ port: 3000 });

// 监听连接事件
wss.on('connection', function connection(ws) {
  console.log('Client connected');

  // 监听消息事件
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });

  // 监听关闭事件
  ws.on('close', function close() {
    console.log('Client disconnected');
  });
});

**代码说明：**
- 引入WebSocket模块，并创建一个WebSocket服务器实例`wss`，监听在3000端口。
- 监听WebSocket连接事件，打印"Client connected"。
- 监听客户端消息事件，打印接收到的消息。
- 监听WebSocket关闭事件，打印"Client disconnected"。

#### 3.2 实现WebSocket连接与断开

要测试WebSocket服务器的连接与断开功能，可以使用WebSocket客户端进行交互。连接成功后，关闭连接即可触发"Client disconnected"。

#### 3.3 处理客户端发送的消息

在服务器端接收到客户端发送的消息后，可以根据业务需求进行处理，例如广播消息给所有连接的客户端或者做其他逻辑处理。

这些步骤将帮助你搭建一个基本的WebSocket服务端，后续章节将继续完善WebSocket功能实现。

#