Nodejs 又做一个聊天室...

发布于 1周前 作者 h691938207 来自 nodejs/Nestjs

Nodejs 又做一个聊天室…

没有从登录开始的功能… 不过这次感觉终于有点进步了. 演示的 VPS 网速马马虎虎: http://s.jiyinyiyong.info/talkpage/page/ 代码: https://github.com/jiyinyiyong/talkpage

前端比以前像样点了, 不过布局只在 Chrome 下完好 <tab> 绑定了一个滑动, 用来在两个师徒直接切换… 但是 Firefox 看了下$('body').animate scrollLeft: 2000 运行不起来的 >_< 另外 <pgup> <pgdown> 绑定了滑动. 话题列表绑定了点击事件, 用来切换话题, 希望 bug 不在这里…

进入界面要先在右边 toggle 填写昵称和头像链接… 好囧的感觉…

代码分层的想法觉得还是比较生涩的, 求高人指点…


13 回复

Node.js 聊天室实现

前言

最近我又做了一个简单的聊天室项目。虽然这次没有从登录功能开始，但我觉得这次的进展让我更有信心。为了展示，我将这个聊天室部署到了一个VPS上，尽管网速一般，但可以体验一下。

技术栈

  • 前端: HTML, CSS, JavaScript (jQuery)
  • 后端: Node.js, Express
  • 实时通信: Socket.IO

项目结构

项目结构相对简单，主要包含以下几个文件夹：

talkpage/
├── public/
│   ├── css/
│   ├── js/
│   └── index.html
├── routes/
│   └── index.js
├── server.js
└── package.json

后端代码

server.js

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.use(express.static('public'));

io.on('connection', (socket) => {
    console.log('New client connected');
    
    socket.on('chat message', (msg) => {
        io.emit('chat message', msg);
    });

    socket.on('disconnect', () => {
        console.log('Client disconnected');
    });
});

server.listen(3000, () => {
    console.log('Server is running on port 3000');
});

前端代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chat Room</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div id="chatbox"></div>
    <input type="text" id="nickname" placeholder="Nickname">
    <input type="text" id="avatar" placeholder="Avatar URL">
    <button id="join-chat">Join Chat</button>
    <input type="text" id="message" placeholder="Type a message...">
    <button id="send-message">Send</button>

    <script src="/js/jquery.min.js"></script>
    <script src="/js/socket.io.min.js"></script>
    <script>
        $(document).ready(() => {
            const socket = io();

            $('#join-chat').click(() => {
                const nickname = $('#nickname').val();
                const avatar = $('#avatar').val();
                if (nickname && avatar) {
                    $('#chatbox').append(`<img src="${avatar}" alt="${nickname}">`);
                }
            });

            $('#send-message').click(() => {
                const message = $('#message').val();
                if (message) {
                    socket.emit('chat message', message);
                    $('#message').val('');
                }
            });

            socket.on('chat message', (msg) => {
                $('#chatbox').append(`<p>${msg}</p>`);
            });
        });
    </script>
</body>
</html>

问题与改进

  1. 跨浏览器兼容性: 目前滑动动画在Firefox中可能无法正常工作。可以使用window.scroll或element.scrollTo来替代。
  2. 代码分层: 代码结构可以进一步优化，例如将业务逻辑、路由和视图分离。

希望这些示例代码能够帮助你理解这个简单的聊天室实现。如果你有任何问题或建议，请留言交流！


我这怎么挂掉了= =

服务器在墙外的 VPS… 好囧啊,

avatar那里我以为是用gavatar的服务，打我的邮箱进去以后，看了看image的URL，发现不是这么回事…

and 输入框太不明显了，稿大一点，然后弄个place holder在那里嘛…

打不开，求打开教程

前面被浏览器兼容性烦得没信心… 于是忘了汉化…

是提示错误还是怎么? 如果是被墙的话我也不知道怎么办了

直接跳出 114 导航了。。。 晚上 回家 翻墙玩 ，囧

电信纠错。。。

能否做个简单点的聊天室，内容不保存数据库，完全页面化的

旧版本大概就这么做的, 不大好的感觉 https://github.com/jiyinyiyong/talkpage/tree/6e4630705acbed47e41eb724c53d74874f4ab722

不保存数据库的话就没有动力去尝试复杂功能了

录了个视频, 至少能表明我对未来聊天工具的期待. http://www.tudou.com/programs/view/YbpYyJIQ3Uk/

Node.js 聊天室开发

概述

这是一个简单的 Node.js 聊天室实现，旨在展示如何使用 WebSocket 技术实现实时通信。此聊天室包括基本的前端布局，并允许用户通过输入昵称和头像链接来加入聊天。

项目结构

talkpage/
├── client/
│   ├── index.html
│   ├── styles.css
│   └── scripts.js
├── server/
│   ├── server.js
│   └── chatServer.js
└── package.json

服务器端代码 (server/chatServer.js)

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
    ws.on('message', function incoming(message) {
        console.log('received: %s', message);
        // 广播消息给所有连接的客户端
        wss.clients.forEach(function each(client) {
            if (client !== ws && client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });

    ws.send('欢迎来到聊天室!');
});

客户端代码 (client/index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="chatBox"></div>
    <input type="text" id="nickname" placeholder="输入昵称">
    <input type="text" id="avatar" placeholder="输入头像链接">
    <button onclick="joinChat()">加入聊天室</button>
    <input type="text" id="messageInput" placeholder="输入消息">
    <button onclick="sendMessage()">发送</button>

    <script src="/socket.io/socket.io.js"></script>
    <script src="scripts.js"></script>
</body>
</html>

客户端代码 (client/scripts.js)

let socket;

function joinChat() {
    const nickname = document.getElementById('nickname').value;
    const avatar = document.getElementById('avatar').value;
    socket = io();
    socket.emit('join', { nickname, avatar });
}

function sendMessage() {
    const message = document.getElementById('messageInput').value;
    socket.emit('message', message);
}

document.addEventListener('DOMContentLoaded', () => {
    const chatBox = document.getElementById('chatBox');
    socket.on('message', (msg) => {
        const messageElement = document.createElement('div');
        messageElement.textContent = msg;
        chatBox.appendChild(messageElement);
    });
});

CSS 样式 (client/styles.css)

#chatBox {
    width: 100%;
    height: 300px;
    border: 1px solid #ccc;
    overflow-y: scroll;
}

启动服务

npm install
node server/server.js

总结

这个简单的聊天室项目展示了如何使用 WebSocket 实现实时通信。前端布局和样式也进行了基础的设置。希望这些示例代码能帮助你理解如何搭建一个基本的聊天室应用。如果你有更具体的需求或问题，请随时提出！

回到顶部
AI 助手
你好，我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验！