实时聊天系统开发教程：socket.io + nodejs + angularjs-JavaScript中文网-JavaScript教程资源分享门户

实时聊天系统开发教程：socket.io + nodejs + angularjs

随着互联网技术的发展，实时聊天已经成为了现代网络应用中重要的功能之一。而实现这些功能的技术手段也变得更加丰富和多样化。本篇文章将介绍如何使用socket.io、nodejs和angularjs构建一个高效的实时聊天应用。

技术介绍

首先，让我们来简单介绍使用到的技术：

Socket.io

Socket.io是一种实现WebSocket的库，提供了实时双向通信，在Web客户端和服务器之间建立持久连接，用于不断传输数据。

Nodejs

Nodejs是一个基于V8引擎的JavaScript运行环境，提供了事件驱动、非阻塞I/O等特点，能够高效处理大量的并发连接请求。

Angularjs

Angularjs是一个用于构建动态Web应用的JavaScript框架，提供了MVC框架、数据双向绑定、模块化等特点，使得前端开发变得高效而有条理。

系统架构

在了解了技术之后，让我们来看一下系统的整体架构。

前端使用Angularjs实现了用户登录、个人信息设置和聊天界面等功能。使用socket.io进行实时通信并交互。

后端使用Nodejs搭建，依赖于Express框架和MongoDB数据库，用于维护用户信息和聊天记录。

开发步骤

有了以上的技术和架构帮助，下面我们开始来实现项目吧！

环境准备

首先，需要安装Nodejs和MongoDB。

然后，使用npm进行安装相关依赖。

npm install express
npm install mongoose
npm install socket.io

数据库设计

在这个实时聊天系统中，我们主要需要维护用户信息和聊天记录。因此，我们需要设计两个数据表：User和Chat。

User表

字段名称	数据类型	描述
name	String	用户名
password	String	用户密码
nickname	String	用户昵称

Chat表

字段名称	数据类型	描述
user	String	用户名
content	String	聊天内容
createTime	Date	消息创建时间

后端开发

基本设置

在后端开发开始之前，需要先做一些基本设置。

新建一个文件夹，作为项目根目录。在其中新建三个子目录：public、routes和views。
将所有相关的JavaScript文件放在public目录下，包括Angularjs控制器、服务以及socket.io相关的脚本。
在routes目录下新建两个js文件：user.js和chat.js。用于维护用户信息和聊天记录。
在views目录下新建三个html文件：login.html、chat.html和setting.html。用于展示登录界面、聊天界面和个人信息设置界面。

用户管理

接下来，我们开始实现用户管理相关的功能。

用户注册

当用户填写完注册信息后，点击注册按钮，前端会发送一个POST请求到后端。

使用express中的Router和Mongoose实现用户信息的保存。

// www.javascriptcn.com code example
var express = require('express');
var router = express.Router();
var UserModel = require('../model/user');
router.post('/register', function(req, res, next) {
    var user = new UserModel({ // 创建一条用户记录
        name: req.body.name,
        password: req.body.password,
        nickname: req.body.nickname
    })
    user.save(function(err) { // 保存用户记录
        if (err) {
            return res.status(500).send()
        }
        return res.status(200).send()
    })
})
module.exports = router;

用户登录

当用户填写完登录信息后，点击登录按钮，前端会发送一个POST请求到后端。

后端通过查询用户信息，如果用户名和密码都正确，则返回200状态。

// www.javascriptcn.com code example
router.post('/login', function(req, res, next) {
    UserModel.findOne({
        name: req.body.name,
        password: req.body.password
    }, function(err, user) {
        if (err || !user) {
            return res.status(500).send()
        }
        req.session.user = user
        return res.status(200).send()
    })
})

用户信息查询

在聊天界面和个人信息设置界面中，需要获取当前登录用户的信息。

router.get('/info', function(req, res, next) {
    var user = req.session.user
    if (!user) {
        return res.status(401).send()
    }
    return res.status(200).send(user)
})

消息处理

在完成用户管理后，我们需要处理实时聊天的消息。

连接处理

当用户登录后，前端会通过socket.io连接到后端服务器。后端服务器接受连接请求并且保存相应的socket实例。

io.on('connection', function(socket) {
    socket.on('login', function() {
        socket.user = req.session.user.name
    })
})

消息发送

当用户发送消息时，前端会通过socket.io发送信息到后端，在此之前前端需要进行一些消息的处理。

socket.emit('message', {
    user: $scope.user.name,
    content: $scope.message
})

后端接受信息并将其保存到数据库中。同时，将消息广播到所有在线用户中。

// www.javascriptcn.com code example
var MessageModel = require('../model/message')
socket.on('message', function(message) {
    var data = {
        user: message.user,
        content: message.content,
        createTime: new Date()
    }
    var message = new MessageModel(data)
    message.save(function(err) {
        if (err) {
            return
        }
        io.emit('message', data)
    })
})

历史消息获取

当用户打开聊天界面时，前端需要获取所有的历史消息。

$http.get('/chat/messages').success(function(messages) {
    $scope.messages = messages
})

后端从数据库中查询所有的聊天记录并将其发送到前端。

// www.javascriptcn.com code example
var MessageModel = require('../model/message')
router.get('/messages', function(req, res, next) {
    MessageModel.find({}).sort('-createTime').exec(function(err, messages) {
        if (err || !messages) {
            return res.status(500).send()
        }
        return res.status(200).send(messages)
    })
})

前端开发

当后端的接口和基础框架都搭建好了之后，我们可以开始处理前端部分了。

登录界面

当用户打开页面时，进入登录界面，填写用户名和密码。

<div id="login" ng-controller="LoginCtrl">
    <input type="text" ng-model="user.name" placeholder="用户名">
    <input type="password" ng-model="user.password" placeholder="密码">
    <button ng-click="register()">注册</button>
    <button ng-click="login()">登录</button>
</div>

当点击登录按钮时，前端将发送POST请求到后端服务器。

$scope.login = function() {
    $http.post('/user/login', $scope.user).success(function() {
        $location.path('/chat')
    })
}

聊天界面

登录成功后进入聊天界面，通过ng-repeat指令展示历史消息和有新消息时的广播信息。

<div id="chat" ng-controller="ChatCtrl">
    <div ng-repeat="message in messages">
        <span ng-if="!isSameUser(message)" class="user">{{message.user}}:</span>
        <span>{{message.content}}</span>
    </div>
</div>

当用户在输入框中输入内容并按下回车键时，前端将发送数据到后端。

$scope.sendMessage = function() {
    socket.emit('message', {
        user: $scope.user.name,
        content: $scope.message
    })
    $scope.message = ''
}

个人信息设置界面

登录成功后即可进入个人信息设置界面，通过ng-model指令可以实时修改用户昵称等信息。

<div id="setting" ng-controller="SettingCtrl">
    <input type="text" ng-model="user.nickname" placeholder="昵称">
    <button ng-click="save()">保存</button>
</div>

同时，修改后页面顶部用户信息也会随之发生变化。

启动和使用

启动后端服务器

node app.js

打开浏览器，在地址栏输入 http://localhost:5000，进入登录界面。

注册一个新用户，或使用已有的账号密码登录。

登录成功后将自动进入聊天界面。

在输入框中输入文字，按下回车键发送即可。

结束语

本篇文章详细介绍了如何使用socket.io、nodejs和angularjs构建一个高效的实时聊天应用，在此基础上还可继续扩展多种功能，例如：私聊、群聊、在线成员显示等等。

如果你对实时聊天应用感兴趣，可以试着根据本文所述的步骤，亲手搭建一个简单的实时聊天系统，感受一下它的魅力。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d7e021a941bf7134e160ff