基于Express4、Socket.io和Bootstrap做了个Nodejs聊天室，已开源到Github，新增表情功能

基于Express4、Socket.io和Bootstrap做了个Nodejs聊天室，已开源到Github，新增表情功能

之前教程都比较老，用的都是Express3 索性自己摸索写了一个，其实node的代码很少，主要时间都花在学习html，js前端和Bootstrap上了 Github地址

以前是windows cpp程序员，完全没接触过web开发，写的不好见笑了，欢迎指正

26 回复

基于Express4、Socket.io和Bootstrap做了个Nodejs聊天室，已开源到Github，新增表情功能

之前教程都比较老，用的都是Express3。索性自己摸索写了一个，其实Node.js的代码很少，主要时间都花在学习HTML、JavaScript前端和Bootstrap上了。这个聊天室现在还增加了一个新功能——表情功能。

项目概述

这个项目是一个简单的多人实时聊天室，使用了以下技术栈：

  • Express4：用于搭建后端服务器。
  • Socket.io：用于实现实时通信。
  • Bootstrap：用于美化前端界面。
  • Emojis：用于添加表情功能。

Github地址

你可以通过以下链接访问我的GitHub仓库：qx-chat

代码示例

后端（Express + Socket.io）
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('A user connected:', socket.id);

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

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

server.listen(3000, () => {
    console.log('Server is running on port 3000');
});
前端（HTML + JavaScript + Bootstrap）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat Room</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
</head>
<body>
    <div class="container">
        <h1>Chat Room</h1>
        <ul id="messages"></ul>
        <form id="send-message">
            <input id="message-input" autocomplete="off" placeholder="Type a message...">
            <button type="submit">Send</button>
        </form>
    </div>

    <script>
        const socket = io();
        const messages = document.getElementById('messages');
        const form = document.getElementById('send-message');
        const input = document.getElementById('message-input');

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

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

表情功能

为了实现表情功能，可以在输入框中添加一个按钮或图标，点击后弹出一个表情选择器。用户可以选择表情并插入到消息中。

<button onclick="insertEmoji(':smile:')">😊</button>
<script>
function insertEmoji(emoji) {
    document.getElementById('message-input').value += emoji;
}
</script>

结语

以前我是Windows C++程序员，完全没有接触过Web开发。因此，如果代码中有任何不足之处，欢迎大家指正。希望这个项目能对你有所帮助！

以上就是基于Express4、Socket.io和Bootstrap实现的Node.js聊天室的介绍，包括基本的代码示例和如何添加表情功能。希望这个项目对你有所启发！


运行实例地址：http://chat.coofly.com

不错.赞一个

非常棒，做的很漂亮，代码我拉过去学学，谢谢

恩。做的不错

刚修复了几个bug，现在基本没什么问题了，哈

怎么启动, node app.js 以后就退出了

你用npm strart

启动脚本是bin\www

lz是用的自己的主机？

恩，用的DigitalOcean的云主机

漂亮

很棒，简洁实用

我在服务器上做了一下nginx反向代理，现在运行实例不需指定3000端口了

以前的运行实例地址是<del>http://chat.coofly.com:3000</del>

现在的运行实例地址http://chat.coofly.com

对啊，socket.io.js耗时好慢，不知道怎么设置，望赐教

socket.io.js改用cdn加速了，现在快了很多

新增了一个表情功能，只能算初步完成，还有很多细节需要完善 有兴趣的可以瞅瞅

楼主厉害啊

赞

新增桌面通知功能

你好，你这个放在什么上面的

楼主，请问一下，现在能用npm只安装express3吗？ express4教程太少了，学起来好费劲啊…

很屌，代码出去 学了。

多谢分享，已star 顺道说下，git clone该项目之后，进入目录使用npm start即可。在浏览器输入http://localhost:3000/即可开始聊天。可以开多个标签实现多人聊天。

赞，成功运行，学习中，

能问一下在MAC下消息通知是怎么做的吗？

用的是 Notif组件

楼主，运行的时候出现 已拦截跨源请求：同源策略禁止读取位于 http://localhost:3000/socket.io/?EIO=2&transport=polling&t=1470663869712-107 的远程资源。（原因：CORS 头缺少 ‘Access-Control-Allow-Origin’）。 这个怎么办呢？

基于Express4、Socket.io和Bootstrap做了个Nodejs聊天室，已开源到Github，新增表情功能

之前教程都比较老，用的都是Express3。索性自己摸索写了一个，其实Node.js的代码很少，主要时间都花在学习HTML、JS前端和Bootstrap上了。以下是我在聊天室中新增表情功能的实现方法。

Github地址

你可以在这里找到项目的完整代码：

实现方法

为了给聊天室增加表情功能，我引入了emoji-picker-element这个库。这个库可以帮助我们快速地为用户添加一个表情选择器。以下是具体的实现步骤：

  1. 安装依赖 首先需要安装emoji-picker-element：

    npm install emoji-picker-element

  2. 前端代码修改 在前端页面（如index.html）中引入emoji-picker-element：

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/emoji-picker-element@1.10.0/emoji-picker-element.min.css">
<script src="https://cdn.jsdelivr.net/npm/emoji-picker-element@1.10.0/emoji-picker-element.min.js"></script>

    然后在聊天输入框后面添加一个表情按钮，并引入一个自定义的表情选择器组件：

    <div class="input-group">
  <input type="text" id="chat-input" class="form-control" placeholder="Type your message here...">
  <button id="emoji-button" class="btn btn-primary">Emoji</button>
</div>

<!-- 引入表情选择器 -->
<emoji-picker id="emoji-picker"></emoji-picker>

<script>
  document.getElementById('emoji-button').addEventListener('click', () => {
    document.getElementById('emoji-picker').toggle();
  });

  // 发送消息时，将选中的表情插入到聊天框中
  document.getElementById('emoji-picker').addEventListener('emoji-clicked', function(event) {
    const emoji = event.detail.emoji;
    document.getElementById('chat-input').value += emoji;
  });
</script>

  3. 服务端处理 服务端处理消息的部分无需做大的改动，只需要确保接收的消息能够正确地显示在聊天界面上即可。

总结

以上就是如何在现有的聊天室项目中新增表情功能的具体实现步骤。整个过程并不复杂，主要是前端部分需要对HTML和JavaScript有一定的了解。希望这些内容对你有所帮助！如果你有任何问题或者建议，欢迎随时提出。

如果大家有任何疑问或建议，可以留言交流。

回到顶部