chat网页版搭建 (chat网页版免登录)

文章编号：5419 / 分类：ChatGPT教程 / 更新时间：2024-06-19 11:33:43 / 浏览：次
网页版免登录

loading="lazy" src="http://pic.howgo.cc/zdmsl_image/article/20240619113344_10791.jpg"/>

本教程将指导您如何搭建一个免登录的 chat 网页版。该网页版将允许匿名用户进行实时聊天。

先决条件

基本的 html、CSS 和 JavaScript 知识文本编辑器网络服务器或托管平台 (例如 GitHub Pages)

步骤

1. 创建 HTML 页面

创建一个新文件并将其保存为


 index.html

： html

2. 添加 CSS 样式

在元素中添加以下 CSS 代码以样式化 chat 页面： css body {font-family: sans-serif; }chat-container {height: 100vh;width: 100%;display: flex;flex-direction: column; }chat-messages {flex: 1;overflow: auto;padding: 10px; }.message {display: flex;align-items: center;margin-bottom: 10px; }.message-author {font-weight: bold;margin-right: 5px; }.message-content {background-color: eee;padding: 10px; }chat-form {display: flex;margin: 20px 0; }chat-input {flex: 1;padding: 5px; }

3. 添加 JavaScript

在元素末尾添加以下 JavaScript，该代码将处理消息发送和接收： javascript const socket = new WebSocket('ws://localhost:8080');const chatMessages = document.getElementById('chat-messages'); const chatForm = document.getElementById('chat-form'); const chatInput = document.getElementById('chat-input');socket.addEventListener('open', () => {console.log('连接已建立'); });socket.addEventListener('close', () => {console.log('连接已关闭'); });socket.addEventListener('message', (event) => {const data = JSON.parse(event.data);renderMessage(data.author, data.content); });chatForm.addEventListener('submit', (event) => {event.preventDefault();const message = chatInput.value;socket.send(JSON.stringify({ content: message }));chatInput.value = ''; });function renderMessage(author, content) {const messageElement = document.createElement('div');messageElement.classlist.add('message');const authorElement = document.createElement('span');authorElement.classList.add('message-author');authorElement.innerText = author;const contentElement = document.createElement('div');contentElement.classList.add('message-content');contentElement.innerText = content;messageElement.appendChild(authorElement);messageElement.appendChild(contentElement);chatMessages.appendChild(messageElement);chatMessages.scrollTop = chatMessages.scrollHeight; }

4. 在服务器上设置 WebSocket

为了启用实时聊天，我们还需要在服务器上设置 WebSocket。您可以使用 Node.js 或 Python 设置 WebSocket 服务器，以下是一个使用 Node.js 的示例： javascript const WebSocket = require('ws');const wss = new WebSocket.Server({ port: 8080 });let clients = [];wss.on('connection', (ws) => {clients.push(ws);ws.on('message', (data) => {const message= JSON.parse(data);clients.forEach((client) => {if (client !== ws) {client.send(JSON.stringify(message));}});});ws.on('close', () => {clients = clients.filter((client) => client !== ws);}); });

5. 部署网页版

现在您已经设置了 chat 网页版和 WebSocket 服务器，您可以将其部署到网络服务器或托管平台上。要部署到 GitHub Pages，请执行以下步骤：将


 index.html

文件添加到存储库的根目录。创建一个


 .github/workflows/main.yml

文件，其中包含以下内容： yaml name: Deploy to GitHub Pageson:push:branches:- mainjobs:deploy:runs-on: ubuntu-lateststeps:- uses: actions/checkout@v2- uses: actions/setup-node@v2with:node-version: '18'- run: npm install- run: npm run build- uses: JamesIves/[email protected]:branch: gh-pagesfolder: build提交更改并推送到 GitHub。