Nodejs websocket.io打造即时聊天程序

Nodejs websocket.io打造即时聊天程序

受网上一些简单聊天程序的启发，自己也动手写了一个，实现了图片和表情功能，欢迎围观。 在线演示：http://hichat.herokuapp.com/ 详细实现过程：http://www.cnblogs.com/Wayou/p/hichat_built_with_nodejs_socket.html


5 回复

Node.js WebSocket.io 打造即时聊天程序

受网上一些简单聊天程序的启发，我决定自己动手写一个基于 Node.js 和 WebSocket.io 的即时聊天程序。这个聊天程序不仅支持文字消息，还实现了图片和表情功能。以下是详细的实现过程。

在线演示

你可以通过以下链接访问在线演示：

实现过程

为了实现这个聊天程序，我们需要以下几个步骤：

  1. 安装必要的依赖
  2. 创建 WebSocket 服务器
  3. 处理客户端连接
  4. 处理消息传递
  5. 添加图片和表情功能

安装必要的依赖

首先，我们需要安装 express 和 socket.io 这两个库来搭建服务器和处理 WebSocket 连接。

npm install express socket.io

创建 WebSocket 服务器

接下来，我们创建一个基本的 Express 服务器，并使用 Socket.io 来处理 WebSocket 连接。

// 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.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
    console.log('A user connected: ' + socket.id);

    socket.on('disconnect', () => {
        console.log('User disconnected: ' + socket.id);
    });

    socket.on('chat message', (msg) => {
        io.emit('chat message', msg);
    });
});

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

处理客户端连接

在客户端，我们需要使用 JavaScript 和 HTML 来创建一个简单的界面，并通过 WebSocket 连接到服务器。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HiChat</title>
</head>
<body>
    <ul id="messages"></ul>
    <form action="">
        <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io();

        const form = document.querySelector('form');
        const input = document.getElementById('m');
        const messages = document.getElementById('messages');

        form.addEventListener('submit', (e) => {
            e.preventDefault();
            if (input.value) {
                socket.emit('chat message', input.value);
                input.value = '';
            }
        });

        socket.on('chat message', (msg) => {
            const item = document.createElement('li');
            item.textContent = msg;
            messages.appendChild(item);
            window.scrollTo(0, document.body.scrollHeight);
        });
    </script>
</body>
</html>

添加图片和表情功能

为了支持图片和表情功能，我们可以扩展消息格式，并在前端进行相应的处理。

// server.js
socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
});

<!-- index.html -->
<form action="">
    <input id="m" autocomplete="off" />
    <button>Send</button>
    <input type="file" id="image" />
</form>

<script>
    // 处理图片上传
    document.getElementById('image').addEventListener('change', (e) => {
        const file = e.target.files[0];
        const reader = new FileReader();
        reader.onload = (event) => {
            socket.emit('chat image', event.target.result);
        };
        reader.readAsDataURL(file);
    });

    // 处理表情
    document.getElementById('m').addEventListener('keydown', (e) => {
        if (e.key === 'Enter' && e.shiftKey) {
            const emoji = document.getElementById('emoji').value;
            socket.emit('chat message', emoji);
        }
    });
</script>

通过以上步骤，我们可以实现一个基本的即时聊天程序，支持文字、图片和表情功能。希望这个示例对你有所帮助！如果你对更多细节感兴趣，可以查看我的博客文章：


前端这么多功能, 真不错… 要不要做成 MVC 呢

asp.net mvc麦？

websocket+nodejs的聊天工具好多啊。。。。

为了使用 Node.js 和 WebSocket 实现一个简单的即时聊天程序，你可以参考以下步骤和代码示例。这个例子将展示如何设置服务器、处理客户端连接，并实现实时消息传递。

安装依赖

首先，你需要安装 ws 库来处理 WebSocket 连接：

npm install ws

服务器端代码

创建一个文件名为 server.js 的服务器端代码：

const WebSocket = require('ws');

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

wss.on('connection', (ws) => {
    console.log('Client connected');
    
    ws.on('message', (message) => {
        console.log(`Received: ${message}`);
        
        // 广播消息给所有连接的客户端
        wss.clients.forEach((client) => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });

    ws.on('close', () => {
        console.log('Client disconnected');
    });
});

console.log('Server started on port 8080');

这段代码创建了一个 WebSocket 服务器，监听端口 8080。每当一个新的客户端连接时，它会打印一条消息。当接收到消息时，它会将消息广播给所有连接的客户端。

客户端代码

创建一个文件名为 index.html 的客户端页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Chat</title>
</head>
<body>
    <input type="text" id="chat-input" placeholder="Type a message...">
    <button onclick="sendMessage()">Send</button>
    <ul id="messages"></ul>

    <script>
        const socket = new WebSocket('ws://localhost:8080');

        socket.onmessage = function(event) {
            const messages = document.getElementById('messages');
            const message = document.createElement('li');
            message.textContent = event.data;
            messages.appendChild(message);
        };

        function sendMessage() {
            const input = document.getElementById('chat-input');
            socket.send(input.value);
            input.value = '';
        }
    </script>
</body>
</html>

这个 HTML 文件创建了一个简单的聊天界面，包含一个输入框和发送按钮。当用户点击发送按钮时，消息会被发送到 WebSocket 服务器。服务器接收到消息后会广播给所有连接的客户端，这些客户端会将消息显示在消息列表中。

运行项目

  1. 启动服务器：

    node server.js

  2. 在浏览器中打开 index.html 文件或通过 HTTP 服务器访问。

以上就是使用 Node.js 和 WebSocket 构建即时聊天应用的基本步骤。这个示例可以作为起点，你可以在此基础上添加更多功能，如表情支持、图片上传等。

回到顶部