一个关于vue+mysql+express的全栈项目(五)------ 实时聊天部分socket.io

一、基于web端的实时通讯,我们都知道有websocket,为了快速开发,本项目我们采用socket.io(客户端使用socket.io-client)

Socket.io是一个WebSocket库,包括了客户端的js和服务器端的nodejs,它的目标是构建可以在不同浏览器和移动设备上使用的实时应用。它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用,非常方便和人性化,而且支持的浏览器最低达IE5.5
socket.io特点:
 实时分析:将数据推送到客户端,这些客户端会被表示为实时计数器,图表或日志客户。
 实时通信和聊天:只需几行代码便可写成一个Socket.IO的”Hello,World”聊天应用。
 二进制流传输:从1.0版本开始,Socket.IO支持任何形式的二进制文件传输,例如:图片,视频,音频等。
 文档合并:允许多个用户同时编辑一个文档,并且能够看到每个用户做出的修改。
socket.io常用事件:
  // 发送给当前客户端
  socket.emit(‘hello‘, ‘can you hear me?‘, 1, 2, ‘abc‘);
  // 发送给所有客户端,除了发送者
  socket.broadcast.emit(‘broadcast‘, ‘hello friends!‘);
  // 发送给同在 ‘game‘ 房间的所有客户端,除了发送者
  socket.to(‘game‘).emit(‘nice game‘, "let‘s play a game");
  // 发送给同在 ‘game1‘ 或 ‘game2‘ 房间的所有客户端,除了发送者
  socket.to(‘game1‘).to(‘game2‘).emit(‘nice game‘, "let‘s play a game (too)");
  // 发送给同在 ‘game‘ 房间的所有客户端,包括发送者
  io.in(‘game‘).emit(‘big-announcement‘, ‘the game will start soon‘);

二、socket.io和express链接

const app = express()
//这里需要使用express对socket.io进行包装
const server = require(‘http‘).Server(app)
const io = require(‘socket.io‘)(server)

server.listen(9094, function(){
     console.log(‘Node app start at port 9094‘)
})

三、使用socket.io

1.客户端代码
    1).引入客户端socket.io-client
         import io from ‘socket.io-client‘
    2).链接服务器
        const socket = io(‘ws://localhost:9094‘)
        //ws是websocket的传输协议
    3).在客户端发送一条消息给服务端
        socket.emit(‘sendmsg‘, msg)
        //sendmsg是客户端广播出去的事件,在服务端可以监听到
2.服务端代码
    io.on(‘connection‘, function(socket) {
       //服务端使用socket.on可以监听到客户端发送的事件
       socket.on(‘sendmsg‘, function (data) {
          //这里监听到后,服务端可以告诉客户端自己收到了
          io.emit(‘recvemsg‘, chatmsg)
       })
    })
3.客户端
    socket.on(‘recvemsg‘, function (data) {
      //客户端监听到服务端的recvemsg
      //........
    })

以上就是socket.io配合express的使用,下面我们就来看看类似微信等实时聊天的社交软件的聊天模型是怎么设计的

原文地址:https://www.cnblogs.com/songdongdong/p/9435852.html

时间: 2024-09-28 05:27:40

一个关于vue+mysql+express的全栈项目(五)------ 实时聊天部分socket.io的相关文章

一个关于vue+mysql+express的全栈项目(二)------ 前端构建

一.使用vue-cli脚手架构建 1 <!-- 全局安装vue-cli --> 2 npm install -g vue-cli 3 <!-- 设置vue webpack模板 --> 4 vue init webpack my-project 5 <!-- 进入项目 --> 6 cd my-project 7 <!-- 安装依赖 --> 8 npm install 9 <!-- 启动项目 --> 10 npm run dev 二.安装axios并

一个关于vue+mysql+express的全栈项目(四)------ sequelize中部分解释

一.模型的引入 引入db.js const sequelize = require('./db') sequelize本身就是一个对象,他提供了众多的方法, const account = sequelize.model('account') //获取account这个模型 二,数据库基本操作(增.删.改.查) 增: account.create(data).then(doc => { const {user_name, user_id, user_info, avatar} = doc res

《从零开始做一个MEAN全栈项目》(1)

欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 在本系列的开篇,我打算讲一下全栈项目开发的优势,以及MEAN项目各个模块的概览. 为什么选择全栈开发?     对于初学者来说,学习一门新的语言和技术的体验总是让人愉快的,也会满足于掌握了一些新的东西并且解决了一些实际问题.在一个小组中采用全栈开发时,你可以更加有效地把握项目全局概念,这也有利于让你了解项目中的不同模块以及它们之间是如何协同工作的.你会对你们的产品中他人的贡献更加清晰,你也就了解了这款产品如何

《从零开始做一个MEAN全栈项目》(2)

欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习.   上一节简单介绍了什么是MEAN全栈项目,这一节将简要介绍三个内容:(1)一个通用的MEAN项目的技术架构,(2)为什么我们要打造单页应用,(3)本系列项目的技术架构和开发计划.希望通过这三个问题,我们能够对本项目产生一个全局视角. 实现一个常见的MEAN全栈项目的核心就是RESTful API.这个接口通常是用MongoDB, Express, Node.js实现的,而单页应用(SPA)由AngularJ

Vue+Node+MongoDB高级全栈开发

第1章 本地与服务器环境准备介绍微信公众号/小程序/域名/服务器的申请选购流程,在本地与线上服务器分别对项目的运行环境进行搭建部署,如 Node.js/Vue/Yarn/PM2/Nginx/MongoDB 等等,同时会来简单介绍下从本地通过 PM2 利用 Git 仓库直接往线上服务器部署以及 Nginx 端口映射解析特定域名的实现流程,最终准备好本地线上和外部业务环境为开发...1-1 导学1-2 课程简介1-3 申请认证公众服务号与小程序1-4 选购域名与备案解析域名1-5 选购配置服务器1-

VueCli3.0全栈项目-资金管理系统带权限(node/element/vue)

课程简介:通过本系列课程,可以快速的掌握全栈开发流程, 包括node.js的接口搭建, vue前端项目的构建, element-ui视图的构建. 一套应有尽有的课程! 课程目录:1.Vue全栈-最终成果展示.mp42.Node接口搭建-express搭建服务器.mp43.Node接口搭建-连接MongoDB数据库.mp44.Node接口搭建-搭建路由和数据模型.mp45.Node接口搭建-搭建注册接口并存储数据.mp46.Node接口搭建-使用全球公认头像gravatar.mp47.Node接口

前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)持续更新 &#362414;

原文: http://blog.gqylpy.com/gqy/438 置顶:来自一名75后老程序员的武林秘籍--必读(博主推荐) 来,先呈上武林秘籍链接:http://blog.gqylpy.com/gqy/401/ 你好,我是一名极客!一个 75 后的老工程师! 我将花两分钟,表述清楚我让你读这段文字的目的! 如果你看过武侠小说,你可以把这个经历理解为,你失足落入一个山洞遇到了一位垂暮的老者!而这位老者打算传你一套武功秘籍! 没错,我就是这个老者! 干研发 20 多年了!我也年轻过,奋斗过!我

3Python全栈之路系列之基于socket实现文件上传

Python全栈之路系列之基于socket实现文件上传 发布时间:2017年3月16日 00:04 浏览(106) 评论(0) 分类:Python 前言 此处没有前言 粘包 在实现发送文件功能之前我们先来理解下粘包的问题,下面有两张图,我觉得很清晰的就可以理解到了. 正常情况下发送文件 第一步: 客户端把获取到的文件总大小(size=65426)先放到缓冲区,然后发送给服务端 第二步: 此时客户端接收到的文件总大小就是65426 粘包的问题下发送文件 第一步: 客户端把获取到的文件总大小(siz

全栈项目|小书架|服务器端-NodeJS+Koa2实现首页图书列表接口

通过上篇文章 全栈项目|小书架|微信小程序-首页水平轮播实现 我们实现了前端(小程序)效果图的展示,这篇文章来介绍服务器端的实现. 首页书籍信息 先来回顾一下首页书籍都有哪些信息: 从下面的图片可以看出目前一本图书信息主要有: 图片字段 名称字段 作者字段 出版社字段 除了以上前端页面中可见的信息外,在服务器开发中还需要给每一条记录(数据)都加上下面的几个字段: 创建时间字段 更新时间字段 删除时间字段 最后完成的数据库表如下: ps:由于数据库是直接导入的,之前的数据库是没有时间字段的,所以前