正文

HTML5 WebSocket实战：轻松搭建实时通信项目示例教程

/0 浏览量
0720

简介

WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议。它允许服务器和客户端之间进行实时、双向通信，而不需要轮询或长轮询等传统方法。HTML5 提供了对 WebSocket 的原生支持，使得实现实时通信变得简单高效。本文将带你一步步搭建一个简单的实时通信项目，让你轻松掌握 WebSocket 的使用。

环境准备

在开始之前，请确保你的开发环境已经安装了以下工具：

  • Node.js
  • npm
  • WebStorm 或其他前端开发工具

项目结构

以下是一个简单的实时通信项目结构：

realtime-communication
├── client
│   ├── index.html
│   ├── style.css
│   └── script.js
├── server
│   ├── index.js
│   └── ws.js
└── package.json

客户端

1. 创建 index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>实时通信示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <input type="text" id="message" placeholder="输入消息">
    <button onclick="sendMessage()">发送</button>
    <div id="messages"></div>

    <script src="script.js"></script>
</body>
</html>

2. 创建 style.css

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

#messages {
    margin-top: 20px;
    height: 300px;
    overflow-y: auto;
    border: 1px solid #ccc;
    padding: 10px;
}

3. 创建 script.js

var socket = new WebSocket('ws://localhost:8080');

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

socket.onmessage = function(event) {
    var messages = document.getElementById('messages');
    messages.innerHTML += '<p>' + event.data + '</p>';
};

function sendMessage() {
    var message = document.getElementById('message').value;
    socket.send(message);
    document.getElementById('message').value = '';
}

服务器

1. 创建 index.js

const http = require('http');
const WebSocket = require('ws');

const server = http.createServer((req, res) => {
    res.writeHead(404);
    res.end();
});

const wss = new WebSocket.Server({ server });

wss.on('connection', function connection(ws) {
    ws.on('message', function incoming(message) {
        console.log('received: %s', message);
    });

    ws.send('连接成功！');
});

server.listen(8080, () => {
    console.log('服务器启动成功，监听端口：8080');
});

2. 创建 ws.js

// ws.js 文件可以省略，因为 index.js 已经包含了 WebSocket 的相关代码

运行项目

  1. 在项目根目录下执行 npm install 安装依赖。
  2. 启动服务器：在终端中运行 node server/index.js。
  3. 打开浏览器，访问 http://localhost:8080，你将看到一个简单的实时通信界面。

总结

通过本文，你学会了如何使用 HTML5 WebSocket 搭建一个简单的实时通信项目。在实际项目中，你可以根据需求添加更多功能，如用户认证、消息存储等。希望本文对你有所帮助！

-- 展开阅读全文 --