正文

HTML5 WebSocket实战：轻松搭建实时通信项目案例详解

/0 浏览量
0719

在互联网时代，实时通信已经成为许多应用不可或缺的一部分。HTML5 WebSocket 提供了一种在单个 TCP 连接上进行全双工通信的协议，使得实时数据的传输成为可能。本文将详细介绍如何使用 HTML5 WebSocket 搭建实时通信项目，并通过一个案例进行实战解析。

一、WebSocket 简介

WebSocket 是一种网络通信协议，它允许服务器和客户端之间进行全双工通信。相比传统的 HTTP 协议，WebSocket 具有以下特点：

  • 全双工通信：客户端和服务器可以同时发送和接收数据。
  • 持久连接：一旦建立连接，除非客户端或服务器主动关闭，否则连接将一直保持。
  • 低延迟：由于连接始终打开，数据传输延迟更低。

二、WebSocket 实战案例

2.1 项目需求

假设我们需要开发一个在线聊天室，用户可以在聊天室内实时发送和接收消息。

2.2 技术选型

  • 前端：HTML5、CSS3、JavaScript
  • 后端：Node.js、WebSocket
  • 数据库：MySQL

2.3 搭建环境

  1. 安装 Node.js 和 npm
  2. 创建项目文件夹，并初始化 npm 项目
  3. 安装所需依赖：express、ws、mysql

2.4 代码实现

2.4.1 前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线聊天室</title>
    <style>
        #chat-box {
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 10px;
            padding: 10px;
            overflow-y: scroll;
        }
        #message {
            width: 260px;
            height: 30px;
            margin: 10px;
        }
        #send {
            width: 60px;
            height: 30px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="chat-box"></div>
    <input type="text" id="message">
    <button id="send">发送</button>
    <script>
        const chatBox = document.getElementById('chat-box');
        const messageInput = document.getElementById('message');
        const sendBtn = document.getElementById('send');

        const ws = new WebSocket('ws://localhost:3000');

        ws.onopen = function () {
            console.log('连接成功');
        };

        ws.onmessage = function (e) {
            const message = JSON.parse(e.data);
            chatBox.innerHTML += `<div>${message.username}: ${message.content}</div>`;
        };

        sendBtn.onclick = function () {
            const content = messageInput.value;
            ws.send(JSON.stringify({ username: '用户', content: content }));
            messageInput.value = '';
        };
    </script>
</body>
</html>

2.4.2 后端

const express = require('express');
const WebSocket = require('ws');
const mysql = require('mysql');

const app = express();
const wss = new WebSocket.Server({ port: 3000 });

const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'chatroom'
});

connection.connect();

wss.on('connection', function connection(ws) {
    ws.on('message', function incoming(message) {
        const data = JSON.parse(message);
        const { username, content } = data;
        const sql = 'INSERT INTO messages (username, content) VALUES (?, ?)';
        connection.query(sql, [username, content], function (error, results, fields) {
            if (error) throw error;
            console.log('Message saved');
        });
        wss.clients.forEach(function each(client) {
            if (client.readyState === WebSocket.OPEN) {
                client.send(JSON.stringify({ username: username, content: content }));
            }
        });
    });
});

app.listen(3000, function () {
    console.log('Server is running on port 3000');
});

2.4.3 数据库

创建一个名为 chatroom 的数据库，并在其中创建一个名为 messages 的表，用于存储聊天记录。

CREATE DATABASE chatroom;

USE chatroom;

CREATE TABLE messages (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50),
    content TEXT
);

三、总结

通过本文的介绍，相信你已经掌握了使用 HTML5 WebSocket 搭建实时通信项目的方法。在实际开发中，可以根据需求调整技术选型和功能实现。希望本文对你有所帮助！

-- 展开阅读全文 --