聊天室入门实战（node，socket.io实现)--第一章（实现登录群聊功能）

最新推荐文章于 2024-07-01 19:37:12 发布

neuqzxy

最新推荐文章于 2024-07-01 19:37:12 发布

阅读量8.4k

点赞数 10

分类专栏： chat聊天实战文章标签： node.js socket.io 聊天室 jquery 实战

本文链接：https://blog.csdn.net/NEUQ_zxy/article/details/76794551

版权

本博客详细介绍了如何使用node.js、socket.io创建聊天室，涵盖登录验证、群聊功能的实现。首先，配置node.js环境，创建项目并初始化。接着，编写登录逻辑，包括客户端登录、服务器端监听登录事件和响应登录成功的处理。再通过sendMessage和receiveMessage事件处理聊天功能。项目已部署，并提供GitHub源码。

摘要由CSDN通过智能技术生成

项目已经部署，请访问： "chat.mycollagelife.com"

这几天花时间写了一个聊天室的demo，实现了登录，用户名检测，群聊，单聊，图片发送等功能，这个系列博客会分为几章讲解，由浅入深，逐步优化，章节间关联性较大，建议从第一章开始阅读。由于水平有限，有说的不对的地方还请各位大佬们留言指正。有不清楚的地方也可以留言提问。该博客说的非常基础，请耐心看完

下面我贴几张完成后的项目图片：

登录界面：

登录检查：

群聊界面：

私聊界面：

该项目已经上传至Github https://github.com/neuqzxy/chat 觉得可以的话给个星星吧吐舌头现在github上有original文件夹是我已经完成的项目，我会将这个系列博客写完后的项目也上传供大家参考。（注意一点的是，我已经完成的项目是用了ejs模板引擎，其实一点用处都没有，大家可以把chat.ejs当做chat.html，修改一下引用的js的路径就行了）

第一天 -- 实现简单的登录和群聊功能

这一章我们需要具备的能力有（具有jquery的简单操作，node以及express的简单操作，socket.io的大致了解的能力）在本章我也会尽量详细的讲解。如果只是想做前端或后台的功能，大家完全可以拷贝自己不做的那一部分。所以不会node的同学不用太担心。

先看看我们将要实现的样式吧

自己发的消息是蓝色的，别人的消息是红色的

好了下面我们开始我们的项目了

node.js环境配置

开始项目前必须要保证你的电脑已经安装好了node环境。win用户直接去node.js官网下载安装包即可安装，和QQ安装没什么差别，Mac和Linux用户如果想源码包安装的话也可

以参考我的这篇文章《ubuntu下配置node环境》。安装好后输入

node -v
npm -v

应该可以看到版本号的。否则安装失败了。

先写简单demo出来

1. 新建一个文件夹叫 chat

2. 在终端输入 npm init 然后一直回车，他会自动给你生成一个package.json文件

3. 创建如下文件夹

之前说过，original项目中使用的是ejs引擎，这个项目中我只用HTML文件，这里main.js是前端js，app.js是node.js。

4. 下面我们安装express和socket.io，输入：

npm install express --save
npm install socket.io --save

这时发现多了一个node_modules文件夹，这是装第三方模块的文件夹，express就在里面，我们不用管这个文件夹

5. 打开socket.io官网，找到这么一段：

5.1 我们先写一个服务器运行一下，在app.js里写：

/**
 * Created by zhouxinyu on 2017/8/6.
 */
const express = require('express');  // const是ES6的语法，代表常量，准确来说就是指向不发生改变。如果不习惯就用var代替
const app = express();               // express官网就是这么写的就是用来创建一个express程序，赋值给app。如果不理解就当公式记住
const fs = require('fs');            // 这个是node的文件读取模块，用于读取文件
const path = require('path');        // 这是node的路径处理模块，可以格式化路径
app.listen(3000,()=>{                // ()=>是箭头函数，ES6语法，如果不习惯可以使用 function() 来代替 ()=>
    console.log("server running at 127.0.0.1:3000");       // 代表监听3000端口，然后执行回调函数在控制台输出。
});

/**
 * app.get(): express中的一个中间件，用于匹配get请求，所谓中间件就是在该轮http请求中依次执行的一系列函数。
 * '/': 它匹配get请求的根路由 '/'也就是 127.0.0.1:3000/就匹配到他了
 * (req,res): ES6语法的箭头函数，你暂时可以理解为function(req,res){}。
 * req带表浏览器的请求对象，res代表服务器的返回对象
 */
app.get('/',(req,res)=>{
    res.redirect('/chat.html');       // express的重定向函数。如果浏览器请求了根路由'/',浏览器就给他重定向到 '127.0.0.1:3000/chat.html'路由中
});


/**
 * 怕不理解，这里我使用的是ES5的语法，没有用到箭头函数
 * 这里匹配到的是/chat.html就是上面重定向到的路径。
 */
app.get('/chat.html',function (req,res) {
    fs.readFile(path.join(__dirname,'./public/chat.html'),function(err,data){       //读取文件，readFile里传入的是文件路径和回调函数，这里用path.join()格式化了路径。
        if(err){
            console.error("读取chat.