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

Ethan Ethan     2022-11-22     748

关键词:

一、基于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的使用,下面我们就来看看类似微信等实时聊天的社交软件的聊天模型是怎么设计的

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

一、基于web端的实时通讯,我们都知道有websocket,为了快速开发,本项目我们采用socket.io(客户端使用socket.io-client)Socket.io是一个WebSocket库,包括了客户端的js和服务器端的nodejs,它的目标是构建可以在不同浏览器和移动设备上... 查看详情

老卫拆书009期:vue+node肩挑全栈!《node.js+express+mongodb+vue.js全栈开发实战》开箱

今天刚拿到一本新书,叫做《Node.js+Express+MongoDB+Vue.js全栈开发实战》,做个开箱。外观先从外观上讲,这本是全新的未开封的,膜还在。 这本书介绍从技术原理到整合开发实战,以丰富的项目展现全... 查看详情

我的全栈工程师之旅

...现在终于有点时间了,鉴于现在前端开发大行其道,作为一个合格的开发者,也改学习学习了。我准备在半个月能搞定这些前端开发的知识,虽无法做到完全精通,但至少要能够写些小小的程序。那么,前端开发需要学习哪些知... 查看详情

vue+nodejs+express+mysql建立一个在线网盘程序(代码片段)

vue+nodejs+express+mysql建立一个在线网盘程序目录vue+nodejs+express+mysql建立一个在线网盘程序第一章开发环境准备1.1开发所用工具简介1.2安装MySQL1.2.1下载安装MySQL1.2.2可能出现的问题和解决方案1.3安装vue-cli1.4安装express第二章数据库设... 查看详情

revelgolang的全栈开发框架

revel是一个golang的全栈web开发框架,支持代码开发阶段的reload,友好的迁移(基于mux支持原有代码的方便迁移)无状态,内置强大的cache,template,job,参数解析,路由安装 goget-ugithub.com/revel/cmd/revel创建应用revelnew-amy-app-r效果&n... 查看详情

全栈软件测试能力培养

...学习,就要Out啦。  近期拜读软测界大师朱教授的关于软件测试能力图谱的文章,无论深度还是广度,都干货满满!全新亮相:软件测试能力图谱AI测试 查看详情

mk-js,一个基于reactnodejs的全栈框架

前言   在这个前端技术爆炸的时代,不自己写套开源框架出门都不好意思跟别人说自己搞前端。去年年初接触的react,16年7月份在github开源了一套针对react、redux探索的项目,近期和伙伴们一起重构了这个项目,等待大... 查看详情

年薪70万的全栈需要什么技能?(代码片段)

...人提供帮助,并大大减少团队沟通的时间和技术成本如果一个人扮演不同的角色,它可以节省公司的人员,基础设施和运营成本成为FullStackDeveloper所需的技能组合1)前端技术全栈开发人员应该掌握HTML5,CSS3,JavaScript等基本前端... 查看详情

我的全栈应用程序文件没有上传到 GitHub,git add 挂了? [关闭]

...2021-12-1601:42:59【问题描述】:我已经使用Mern堆栈创建了一个全栈Web应用程序,但是当我现在尝试将文件上传到GitHub时,终端挂起。在VsCode中,它在源代码控制面 查看详情

从零开始的全栈工程师——html篇2.5

...质就是处理数据数据来自于后台的数据库所以变量就起到一个临时存储数据的这作用ECMAscirpt制定了js的数据类型一、数据类型1.基本数据类型基本数据类型就是简单的赋值Vars=”hello”;vars=12;vars=true;vars=null;vars=undefined;1)基本数据... 查看详情

从零开始的全栈工程师——html篇1.2

...重是10id的权重是100权重是可以叠加的。比如 注意给一个标签起两个名字的时候千万不 查看详情

关于vue2.0,express实现的简单跨域

npminstallexpress-g通过npm全局安装express,之后可以通过express--version来查看express版本expressserver通过expressserver生成server项目文件npminstall安装server的项目依赖可以通过执行server下的binwww文件可以开启服务在www文件我们可以默认监听的... 查看详情

如何将 Gatsby.js 与我的 Express 服务器链接

】如何将Gatsby.js与我的Express服务器链接【英文标题】:HowtolinkGatsby.jswithmyExpressserver【发布时间】:2019-04-0903:10:59【问题描述】:我正在尝试制作一个非常基本的全栈应用程序,其中前端是Gatsby,后端是一个简单的Express服务器。... 查看详情

从零开始的全栈工程师——html篇1.6

...自动从左往右,从上往下的流式排列所以我们要给元素加一个浮动使它脱离标准文档流的控制效果:元素都加浮动,后面的元素会紧 查看详情

译基于mean的全栈开发实例教程校对版笔记

...文件、图片等。routes 包括一系列的javascript文件,每一个文件都为该应用的给定模块定义了一些路由以及业务逻辑。views 包括了应用中的视图文件。Jade是默认的模板引擎。app.js程序的主入口。包括一些程序配置和声明。pa... 查看详情

寻找基于 Node.js 的全栈来创建现代博客

】寻找基于Node.js的全栈来创建现代博客【英文标题】:LookingforaNode.js-basedfull-stacktocreateamodernblog【发布时间】:2015-01-1402:02:43【问题描述】:我想离开Wordpress,我的博客可能还包含具有不同布局/设计的页面。因此,我正在寻找... 查看详情

nodejs全栈开发一个功能完善的express项目(附完整源码)(代码片段)

...分项,而是前端攻城师们必须要掌握的一项技能。而Express基于Node.js平台,快速、开放、极简的Web开发框架,成为Node.js最流行的框架,所以使用Express进行web服务端的开发是个不错且可 查看详情

从“一云多芯”支持,看多元算力的全栈云方案

...Stack如何在不同CPU架构下,构建信创云平台多元算力的全栈解决方案?本文将为你具体阐释。本文分享自华为云社区《从“一云多芯”支持,看多元算力的全栈云方案》,作者:徐安华为云Stack资深架构师。背... 查看详情