• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

Nodejs 从零开始写 即时通讯程序

武飞扬头像
Moieo.
帮助1

什么是即时通讯?

即时通信(IM)是指能够即时发送和接收互联网消息等的业务。自1998年面世以来,特别是近几年的迅速发展,即时通信的功能日益丰富,逐渐集成了电子邮件、博客、音乐、电视、游戏和搜索等多种功能。即时通信不再是一个单纯的聊天工具,它已经发展成集交流、资讯、娱乐、搜索、电子商务、办公协作和企业客户服务等为一体的综合化信息平台

如何在 Web 实现?

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(Full-duplex)通信,即允许服务器主动发送信息给客户端。因此,在WebSocket中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输,客户端和服务器之间的数据交换变得更加简单。

WebSocket 的优缺点

  • 优点:支持服务器推送消息,支持多个请求
  • 缺点:浏览器支持程度不一

开始

安装 Express

已经安装可以跳过

npm install -g express-generator
#或
yarn global add express-generator

建议使用yarn,速度更快

创建一个新项目

express -e "项目名称"

安装需要的依赖

cd "项目名称"
npm install
#或
yarn install

启动项目

yarn start
#或
npm start

编辑后自动重启项目

安装nodemon

yarn add nodemon
#或
npm install --save nodemon

package.json里修改相关配置

"scripts": {
    "start": "node ./bin/www.js",
    "dev": "nodemon ./bin/www.js"
 }

重命名文件
bin/www 重命名成 bin/www.js才能自动重启
修改后如下
学新通
重新启动项目

yarn dev
#或
npm run dev

项目目录结构如下
学新通
浏览器访问http://127.0.0.1:3000即可看到如下画面
学新通
这样你已经完成了第一步

基本实现

接下来安装需要的模块

yarn add socket.io

创建一个文件夹sockets,专门用来写socket服务端
sockets文件夹中创建app.js
具体内容如下

const app = function(server) {
  var io = require('socket.io')(server);
  io.on('connection',function(socket){
    socket.on('login',function(res){ /* 登录 */
      io.emit("登录成功");
    });
  });
}
module.exports = app; /* 导出 */

bin/www.js中注册socket.io服务
学新通
前端部分
public文件夹创建index.html
内容如下
学新通

浏览器打开:http://127.0.0.1:3000/
你将可以看到 emit 向后端 socket.io 发送的 hello

开源仓库:Coding
GitHub

目前已实现功能

前端:ejs模板

  1. 多频道(聊天室)
  2. 通过QQ获取昵称和头像
  3. 通过 Gravatar / Cravatar 获取头像
  4. 聊天Emoji表情、上传图片
  5. Markdown / HTML 消息支持
  6. 频道成员退出提醒
  7. 频道之间不互通

这篇好文章是转载于:学新通技术网

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通技术网
  • 本文地址: /boutique/detail/tanhgfkfkc
系列文章
更多 icon
同类精品
更多 icon
继续加载