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 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
jQuery模拟超链接点击效果代码
Apr 21 Javascript
node.js WEB开发中图片验证码的实现方法
Jun 03 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
Nov 29 Javascript
Vue.js划分组件的方法
Oct 29 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 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
5.PHP的其他功能
2006/10/09 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
jsTree 基于JQuery的排序节点 Bug
2011/07/26 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
Js 获取Gridview选中行的内容操作步骤
2013/02/05 Javascript
JS Map 和 List 的简单实现代码
2013/07/08 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
python类继承与子类实例初始化用法分析
2015/04/17 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
Python 如何创建一个线程池
2020/07/28 Python
应届护士推荐信
2013/11/16 职场文书
韩国商务邀请函
2014/01/14 职场文书
大学生自我鉴定评语
2014/01/27 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
2014年变电站工作总结
2014/12/19 职场文书
餐饮食品安全责任书
2015/01/29 职场文书
职工食堂管理制度
2015/08/06 职场文书
辞职申请书范本
2019/05/20 职场文书
创业计划书之外语培训班
2019/11/02 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
MySQL之select、distinct、limit的使用
2021/11/11 MySQL
React四级菜单的实现
2022/04/08 Javascript