博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
一个关于vue+mysql+express的全栈项目(五)------ 实时聊天部分socket.io
阅读量:5151 次
发布时间:2019-06-13

本文共 1835 字,大约阅读时间需要 6 分钟。

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

Socket.io是一个WebSocket库,包括了客户端的js和服务器端的nodejs,它的目标是构建可以在不同浏览器和移动设备上使用的实时应用。它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用, 非常方便和人性化,而且支持的浏览器最低达IE5.5socket.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

你可能感兴趣的文章
mysql触发器
查看>>
淌淌淌
查看>>
web页面实现指定区域打印功能
查看>>
win10每次开机都显示“你的硬件设置已更改,请重启电脑……”的解决办法
查看>>
C++有关 const & 内敛 & 友元&静态成员那些事
查看>>
函数积累
查看>>
Swift 入门之简单语法(六)
查看>>
shim和polyfill有什么区别
查看>>
〖Python〗-- IO多路复用
查看>>
栈(括号匹配)
查看>>
Java学习 · 初识 面向对象深入一
查看>>
源代码如何管理
查看>>
vue怎么将一个组件引入另一个组件?
查看>>
bzoj1040: [ZJOI2008]骑士
查看>>
LeetCode 74. Search a 2D Matrix(搜索二维矩阵)
查看>>
利用SignalR来同步更新Winfrom
查看>>
反射机制
查看>>
CocoaPod
查看>>
BZOJ 1251: 序列终结者 [splay]
查看>>
5G边缘网络虚拟化的利器:vCPE和SD-WAN
查看>>