python局域网聊天+传代码

2026-08-13 18:47:37
发布于：广东
53阅读
0回复
0点赞
本内容由AI生成，并非本人制作

请安装flask！！

from flask import Flask, request, session, redirect, url_for, render_template_string
import json
import os
import html
import threading
from datetime import datetime

app = Flask(__name__)
app.secret_key = os.urandom(24)

# ---------- 文件路径 ----------
CHAT_FILE = 'chat_data.json'
CODE_FILE = 'code_data.json'

# ---------- 线程锁 ----------
chat_lock = threading.Lock()
code_lock = threading.Lock()

# ---------- 文件读写 ----------
def load_json(filepath, default):
    try:
        with open(filepath, 'r', encoding='utf-8') as f:
            return json.load(f)
    except (FileNotFoundError, json.JSONDecodeError):
        return default

def save_json(filepath, data, lock):
    with lock:
        with open(filepath, 'w', encoding='utf-8') as f:
            json.dump(data, f, ensure_ascii=False, indent=2)

# ---------- 启动时加载 ----------
chat_messages = load_json(CHAT_FILE, [])
code_snippets = load_json(CODE_FILE, {})
next_code_id = max([int(k) for k in code_snippets.keys()], default=0) + 1 if isinstance(code_snippets, dict) else 1

# ---------- 主页 ----------
@app.route('/')
def index():
    html = """
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>局域网工具</title>
        <style>
            body { font-family: sans-serif; text-align: center; margin-top: 50px;
                   background: #f0f2f5; }
            a { display: inline-block; margin: 20px; padding: 15px 35px;
                font-size: 18px; background: #4CAF50; color: white;
                text-decoration: none; border-radius: 8px;
                box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
            a:hover { background: #45a049; transform: scale(1.03); }
            h1 { color: #333; }
        </style>
    </head>
    <body>
        <h1>欢迎使用局域网工具</h1>
        <p style="color: #888;">数据已持久化到本地文件，重启不丢失</p>
        <a href="/liaotian">去聊天</a>
        <a href="/daima">传输代码</a>
    </body>
    </html>
    """
    return render_template_string(html)

# ---------- 聊天界面 ----------
@app.route('/liaotian', methods=['GET', 'POST'])
def liaotian():
    if 'name' not in session:
        session['name'] = '匿名'

    if request.method == 'POST':
        if 'new_name' in request.form:
            session['name'] = request.form['new_name'].strip() or '匿名'
        elif 'message' in request.form:
            msg = request.form['message'].strip()
            if msg:
                now = datetime.now().strftime('%m-%d %H:%M')
                chat_messages.append({
                    'name': session.get('name', '匿名'),
                    'message': msg,
                    'time': now
                })
                save_json(CHAT_FILE, chat_messages, chat_lock)
        return redirect(url_for('liaotian'))

    chat_html = ""
    for item in chat_messages:
        name_esc = html.escape(item['name'])
        msg_esc = html.escape(item['message'])
        # 关键修复：转义花括号，防止用户消息中的 { 或 } 被 Jinja2 误解析
        msg_esc = msg_esc.replace('{', '&#123;').replace('}', '&#125;')
        time_str = html.escape(item.get('time', ''))
        chat_html += (
            f'<p><b>{name_esc}</b> '
            f'<span style="font-size: 12px; color: #999;">{time_str}</span>'
            f'<br>{msg_esc}</p>'
        )

    name_esc = html.escape(session.get('name', '匿名'))

    html_code = f"""
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>聊天室</title>
        <style>
            body {{ font-family: sans-serif; max-width: 600px; margin: 20px auto;
                   background: #f0f2f5; }}
            .chat-box {{ border: 1px solid #***; padding: 12px; height: 350px;
                         overflow-y: auto; margin-bottom: 10px; background: white;
                         border-radius: 6px; }}
            .chat-box p {{ margin: 8px 0; word-break: break-all; line-height: 1.5; }}
            input, button {{ padding: 8px 12px; border-radius: 4px; border: 1px solid #ccc; }}
            button {{ background: #4CAF50; color: white; border: none; cursor: pointer; }}
            button:hover {{ background: #45a049; }}
            .name-area {{ margin-bottom: 20px; background: white; padding: 12px;
                          border-radius: 6px; border: 1px solid #***; }}
            a {{ color: #4CAF50; }}
            .refresh-indicator {{
                font-size: 12px;
                color: #666;
                text-align: right;
                margin-top: 5px;
            }}
        </style>
    </head>
    <body>
        <h2>聊天室</h2>
        <div class="name-area">
            <form method="POST">
                你的名字:
                <input type="text" name="new_name" value="{name_esc}" style="width: 150px;">
                <button type="submit">更改</button>
            </form>
        </div>
        <div class="chat-box" id="chatBox">{chat_html}</div>
        <div id="refreshIndicator" class="refresh-indicator">最后更新: 刚刚</div>
        <form method="POST" id="messageForm">
            <input type="text" name="message" id="messageInput" placeholder="输入消息..." style="width: 70%;">
            <button type="submit">发送</button>
        </form>
        <br><a href="/">← 返回主页</a>
        
        <script>
            // 获取聊天框和输入框元素
            const chatBox = document.getElementById('chatBox');
            const messageInput = document.getElementById('messageInput');
            const refreshIndicator = document.getElementById('refreshIndicator');
            
            // 页面加载后滚动到聊天框底部
            window.onload = function() {{
                if (chatBox) {{
                    chatBox.scrollTop = chatBox.scrollHeight;
                }}
            }};
            
            // 防止表单提交导致页面刷新
            document.getElementById('messageForm').addEventListener('submit', function(e) {{
                e.preventDefault();
                sendMessage();
            }});
            
            // 发送消息函数
            function sendMessage() {{
                const message = messageInput.value.trim();
                if (!message) return;
                
                // 创建表单数据
                const formData = new FormData();
                formData.append('message', message);
                
                // 发送AJAX请求
                fetch('/liaotian', {{
                    method: 'POST',
                    body: formData
                }})
                .then(response => {{
                    if (response.redirected) {{
                        // 重定向表示成功，刷新聊天内容
                        loadChatMessages();
                        messageInput.value = ''; // 清空输入框
                    }}
                }})
                .catch(error => {{
                    console.error('发送消息失败:', error);
                }});
            }}
            
            // 加载聊天消息
            function loadChatMessages() {{
                fetch('/liaotian')
                .then(response => response.text())
                .then(html => {{
                    // 从HTML中提取聊天内容
                    const parser = new DOMParser();
                    const doc = parser.parseFromString(html, 'text/html');
                    const newChatBox = doc.getElementById('chatBox');
                    
                    if (newChatBox && chatBox) {{
                        // 保存当前滚动位置
                        const wasAtBottom = chatBox.scrollHeight - chatBox.scrollTop <= chatBox.clientHeight + 50;
                        
                        // 更新聊天内容
                        chatBox.innerHTML = newChatBox.innerHTML;
                        
                        // 如果之前滚动到底部，保持到底部
                        if (wasAtBottom) {{
                            chatBox.scrollTop = chatBox.scrollHeight;
                        }}
                        
                        // 更新刷新时间
                        const now = new Date();
                        refreshIndicator.textContent = '最后更新: ' + 
                            now.getHours().toString().padStart(2, '0') + ':' + 
                            now.getMinutes().toString().padStart(2, '0') + ':' + 
                            now.getSeconds().toString().padStart(2, '0');
                    }}
                }})
                .catch(error => {{
                    console.error('加载消息失败:', error);
                }});
            }}
            
            // 每3秒自动刷新聊天内容（不刷新整个页面）
            setInterval(loadChatMessages, 3000);
            
            // 初始加载后开始定时刷新
            setTimeout(loadChatMessages, 100);
        </script>
    </body>
    </html>
    """
    return render_template_string(html_code)

# ---------- 代码传输界面 ----------
@app.route('/daima', methods=['GET', 'POST'])
def daima():
    global next_code_id, code_snippets

    if request.method == 'POST':
        action = request.form.get('action')

        if action == 'view':
            code_id = request.form.get('code_id', '').strip()
            if code_id.isdigit():
                cid = int(code_id)
                snippet = code_snippets.get(str(cid))
                if snippet:
                    return render_template_string(code_display_html(cid, snippet))
                else:
                    return render_template_string(message_html("错误", "编号不存在，请检查后重试"))
            else:
                return render_template_string(message_html("错误", "请输入有效数字编号"))

        elif action == 'send':
            author = request.form.get('author', '').strip()
            code = request.form.get('code', '').strip()
            language = request.form.get('language', 'txt').strip()
            if not author or not code:
                return render_template_string(message_html("错误", "发布者和代码内容不能为空"))
            cid = next_code_id
            code_snippets[str(cid)] = {
                'author': author,
                'code': code,
                'language': language
            }
            save_json(CODE_FILE, code_snippets, code_lock)
            next_code_id += 1
            return render_template_string(
                message_html("发送成功", f"发送完毕，你的编号为 {cid}。其他人可用此编号查看代码。", show_back=True)
            )

    html = """
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>代码传输</title>
        <style>
            body { font-family: sans-serif; max-width: 500px; margin: 20px auto;
                   background: #f0f2f5; }
            .form-box { border: 1px solid #***; padding: 18px; margin: 12px 0;
                        background: white; border-radius: 6px; }
            input, textarea, button, select { padding: 8px 12px; border-radius: 4px;
                                               border: 1px solid #ccc; margin: 5px 0; }
            textarea { width: 96%; height: 120px; font-family: monospace; }
            input[type="text"] { width: 96%; }
            select { width: 100%; }
            button { background: #4CAF50; color: white; border: none; cursor: pointer;
                     padding: 10px; font-size: 15px; }
            button:hover { background: #45a049; }
            h3 { margin-top: 0; }
            a { color: #4CAF50; }
        </style>
    </head>
    <body>
        <h2>代码传输</h2>
        <div class="form-box">
            <h3>查看代码</h3>
            <form method="POST">
                <input type="hidden" name="action" value="view">
                编号: <input type="text" name="code_id" placeholder="输入编号，如 1">
                <button type="submit">查看代码</button>
            </form>
        </div>
        <div class="form-box">
            <h3>发送代码</h3>
            <form method="POST">
                <input type="hidden" name="action" value="send">
                发布者: <input type="text" name="author" placeholder="你的名字"><br>
                请选择语言:
                <select name="language">
                    <option value="txt">txt</option>
                    <option value="c++">c++</option>
                    <option value="python">python</option>
                    <option value="其他">其他</option>
                </select><br>
                代码:<br>
                <textarea name="code" placeholder="在此粘贴代码..."></textarea><br>
                <button type="submit" style="width: 100%;">发送代码</button>
            </form>
        </div>
        <br><a href="/">← 返回主页</a>
    </html>
    """
    return render_template_string(html)

# ---------- 辅助页面函数 ----------
def code_display_html(cid, snippet):
    author_esc = html.escape(snippet['author'])
    code_esc = html.escape(snippet['code'])
    # 关键修复：将花括号转为 HTML 实体，防止 Jinja2 误解析
    code_esc = code_esc.replace('{', '&#123;').replace('}', '&#125;')
    lang = html.escape(snippet.get('language', 'txt'))

    return f"""
    <!DOCTYPE html>
    <html>
    <head><meta charset="utf-8"><title>代码 #{cid}</title>
    <style>
        body {{ font-family: sans-serif; max-width: 650px; margin: 20px auto; background: #f0f2f5; }}
        pre {{ background: #1e1e1e; color: #d4d4d4; padding: 16px; border-radius: 6px;
               white-space: pre-wrap; overflow-x: auto; font-size: 14px; position: relative; }}
        .info {{ background: white; padding: 12px 16px; border-radius: 6px; margin-bottom: 12px; }}
        .info p {{ margin: 4px 0; }}
        .lang-tag {{ display: inline-block; background: #4CAF50; color: white;
                     padding: 2px 10px; border-radius: 12px; font-size: 13px; }}
        a {{ color: #4CAF50; }}
        .copy-btn {{ position: absolute; top: 10px; right: 10px; padding: 6px 12px;
                     background: #4CAF50; color: white; border: none; border-radius: 4px;
                     cursor: pointer; font-size: 13px; z-index: 10; }}
        .copy-btn:hover {{ background: #45a049; }}
        .toast {{ position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
                  background: rgba(0,0,0,0.7); color: white; padding: 10px 20px;
                  border-radius: 4px; display: none; z-index: 999; }}
    </style>
    </head>
    <body>
        <!-- 操作提示弹窗 -->
        <div class="toast" id="copyToast">复制成功！代码已写入剪贴板</div>
        <div class="info">
            <h2>代码 #{cid}</h2>
            <p><b>发布者:</b> {author_esc}</p>
            <p><b>语言:</b> <span class="lang-tag">{lang}</span></p>
        </div>
        <pre id="codeBlock">
            <button class="copy-btn" onclick="copyCode()">复制代码</button>
{code_esc}
        </pre>
        <br><a href="/daima">← 返回代码传输</a>

        <script>
            function copyCode() {{
                // 获取 pre 元素，通过 cloneNode 排除按钮后获取纯代码文本
                const preElem = document.getElementById('codeBlock');
                const clone = preElem.cloneNode(true);
                const btn = clone.querySelector('.copy-btn');
                if (btn) btn.remove();
                // 使用 textContent 获取纯文本（HTML实体会自动解码为原始字符）
                let codeText = clone.textContent || '';
                codeText = codeText.trim();

                // 存储按钮原始文本，复制成功后修改提示
                const copyBtn = preElem.querySelector('.copy-btn');
                const originalText = copyBtn.textContent;

                // 定义复制成功后的UI反馈
                function showSuccess() {{
                    copyBtn.textContent = '已复制!';
                    copyBtn.style.background = '#45a049';
                    const toast = document.getElementById('copyToast');
                    toast.style.display = 'block';
                    setTimeout(() => {{
                        toast.style.display = 'none';
                        copyBtn.textContent = originalText;
                        copyBtn.style.background = '#4CAF50';
                    }}, 2000);
                }}

                // 方案一：优先使用现代 Clipboard API
                if (navigator.clipboard && window.isSecureContext) {{
                    navigator.clipboard.writeText(codeText).then(() => {{
                        showSuccess();
                    }}).catch(err => {{
                        console.error('Clipboard API 失败，尝试降级方案:', err);
                        fallbackCopy(codeText);
                    }});
                }} else {{
                    // 方案二：降级使用传统 textarea + execCommand 方式
                    fallbackCopy(codeText);
                }}

                // 降级复制方案（兼容所有浏览器和HTTP环境）
                function fallbackCopy(text) {{
                    const textarea = document.createElement('textarea');
                    textarea.value = text;
                    textarea.style.position = 'fixed';
                    textarea.style.left = '-9999px';
                    textarea.style.top = '-9999px';
                    document.body.appendChild(textarea);
                    textarea.focus();
                    textarea.select();
                    try {{
                        const success = document.execCommand('copy');
                        if (success) {{
                            showSuccess();
                        }} else {{
                            alert('复制失败，请手动选中代码后使用 Ctrl+C 复制');
                        }}
                    }} catch (e) {{
                        alert('复制失败，请手动选中代码后使用 Ctrl+C 复制');
                        console.error('execCommand 复制出错:', e);
                    }}
                    document.body.removeChild(textarea);
                }}
            }}
        </script>
    </body>
    </html>
    """

def message_html(title, message, show_back=False):
    back = '<br><a href="/daima">← 返回代码传输</a>' if show_back else ''
    return f"""
    <!DOCTYPE html>
    <html>
    <head><meta charset="utf-8"><title>{title}</title>
    <style>
        body {{ font-family: sans-serif; max-width: 500px; margin: 50px auto;
               text-align: center; background: #f0f2f5; }}
        .msg-box {{ background: white; padding: 30px; border-radius: 8px;
                    border: 1px solid #***; }}
        a {{ color: #4CAF50; }}
    </style>
    </head>
    <body>
        <div class="msg-box">
            <h2>{title}</h2>
            <p style="font-size: 16px;">{message}</p>
            {back}
            <br><a href="/">← 返回主页</a>
        </div>
    </body>
    </html>
    """

# ---------- 启动 ----------
if __name__ == '__main__':
    print("正在启动服务器...")
    print(f"聊天记录 → {os.path.abspath(CHAT_FILE)}")
    print(f"代码库   → {os.path.abspath(CODE_FILE)}")
    app.run(host='0.0.0.0', port=5000, debug=True)