Nodejs socket.io 聊天小程序分享

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

Nodejs socket.io 聊天小程序分享

框架:

express+socket.io+jquery+bootstrap 使用 localstorage 存储用户信息

功能介绍:

  1. 私聊(双击用户)
  2. 广播
  3. 发送表情(qq 表情)

github

项目地址

线上演示

free_chat

untitled1.png


5 回复

线上演示的也是 github 地址呢。


差评 没有演示

socket.io 官网的例子你也拿出来分享吗?

呵呵。

我们采用 meteorjs ,在做这样的聊天功能时非常的方便,当然 meteor 是把 socket 吸收进去了。希望以后 websocket 能走得长远

以下是一个基于Node.js和Socket.io构建的简易实时聊天小程序示例,包含核心代码片段及简要说明:

服务端代码(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);

let users = {};

io.on('connection', (socket) => {
    console.log('a user connected');

    socket.on('new-user', (name) => {
        users[socket.id] = name;
        socket.broadcast.emit('user-connected', name);
    });

    socket.on('send-chat-message', (message) => {
        io.emit('chat-message', { message: message, name: users[socket.id] });
    });

    socket.on('disconnect', () => {
        const userName = users[socket.id];
        delete users[socket.id];
        io.emit('user-disconnected', userName);
        console.log('user disconnected');
    });
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

客户端代码(index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实时聊天应用</title>
    <script src="/socket.io/socket.io.js"></script>
</head>
<body>
    <ul id="messages"></ul>
    <form id="form" action="">
        <input id="input" autocomplete="off" placeholder="输入消息..."/>
        <button>发送</button>
    </form>
    <script>
        // 客户端Socket.io连接及消息发送、接收逻辑
        // ...(此处省略具体实现,可参考原始回复)
    </script>
</body>
</html>

以上代码展示了如何使用Node.js和Socket.io构建一个基本的实时聊天应用,包括用户连接、消息发送和接收、用户断开连接等功能。

回到顶部