koa socket即时通讯的示例代码


Posted in Javascript onSeptember 07, 2018

前言

http的特点是一问一答,而即时通讯是需要双向通信的,这样以前的即时通信只能使用轮询的方式通过周期性的ajax请求获取数据,直到websocket出现,就完美实现了双向通信

一 即时通讯方式简介

段轮询

前台使用setInterval进行定时请求后台,这样无疑非常浪费性能

长轮询和长连接(html5的EventSource)

客服端连接一次,服务端不断开连接,服务端接收到新消息就发送给前台,客服端和服务端保持一直连接,缺点是只有服务端向客服端输出

websocket

websocket不再是走http协议,而是升级为websocket协议,说到底就是走应用层协议(tcp),实现双向通信,缺点是兼容性问题(ie11)

socket.io

上面的方式都存在一定问题,自然就有人封装一套完美的解决方案,socket.io就是集合了上面几种方案的另一种解决方案

二 即时通信实现

客服端

引入包:<script src="https://cdn.socket.io/socket.io-1.2.1.js";></script>

服务端和客服端通过on和emit进行交互

  1. emit表示发送,事件名自定义,另一端用on进行接收
  2. on表示接受,类似jq绑定事件,事件名对应emit事件名
  3. connect,disconnect是连接和断开事件
// 建立连接
 var socket= io('http://localhost:80')
 // on表示接收
 // emit表示发送
 socket.on('connect', function () {
 console.log('连接上了')
 // 登录,同步前后端信息
 // 请求后端login接口,写入socketid
 socket.emit('login', {
  // 身份标识,可以是时间戳或者唯一id,最要用来回去socketid进行私聊
  id: username
 })
 })


 // 发送消息,这里可以用发送事件进行消息发送
 socket.emit('sendMsg', {
 newAccount: 'xxxxxx'
 })
 
 // 接收消息
 socket.on('msg1', function (data) {
 // 可以对数据进行渲染
 console.log(data)
 
 })
 socket.on('allmessage', function (data) {
 // 接收所有人消息
 console.log(data);

 })
 
 // 表示连接断开了
 socket.on('disconnect', function () {
 console.log('聊天服务器断开了')
 })

服务端(koa+koa-socket)

安装koa-socket

npm i koa2 koa-socket -S
const IO = require('koa-socket')
 const Koa = require('koa2')
 const io = new IO()
 
 const app = new Koa()
 
 // 将socket和app关联
 io.attach(app)
 // 和客服端进行连接
 io.on('connection', (context) => {
 console.log('连接上了')
 })
 // 接收消息
 io.on('sendMsg', function (context) {
 //console.log(context.data)
 // 向客服端实时发送消息
 io.broadcast('msg1', '我是服务器来的')

 // 广播,所有人消息
 io.broadcast('allmessage', context.data.newAccount)
 })

 // 处理登陆同步信息
 io.on('login', context => {
 let id = context.data.id;
 console.log(context);
 });

总结

上面就是koa-socket使用的简单介绍,只实现了简单的消息推送和接收,后面还有私聊和群发,其原理是获取到每个用户的socketid,发送消息时对应发送,后面再进行更新

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery操作input值的各种方法总结
Nov 21 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
做web开发 先学JavaScript
Dec 12 Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 #Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 #Javascript
小程序点赞收藏功能的实现代码示例
Sep 07 #Javascript
前端防止用户重复提交js实现代码示例
Sep 07 #Javascript
vue实现打印功能的两种方法
Sep 07 #Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 #Javascript
详解如何构建一个Angular6的第三方npm包
Sep 07 #Javascript
You might like
php cookis创建实现代码
2009/03/16 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
laypage.js分页插件使用方法详解
2019/07/27 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
echarts实现晶体球面投影的实例教程
2020/10/10 Javascript
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
python实现flappy bird游戏
2018/12/24 Python
PyTorch搭建一维线性回归模型(二)
2019/05/22 Python
python在不同条件下的输入与输出
2020/02/13 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
服务中心夜班服务员岗位职责
2013/11/27 职场文书
设计总监岗位职责
2013/12/07 职场文书
送货司机岗位职责
2013/12/11 职场文书
实习生的自我评价
2014/01/08 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
管理人员岗位职责
2015/02/14 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
KTV员工管理制度
2015/08/06 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
Python操作CSV格式文件的方法大全
2021/07/15 Python
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers
使用CSS定位HTML元素的实现方法
2022/07/07 HTML / CSS
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技