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 相关文章推荐
js 日期转换成中文格式的函数
Jul 07 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
jQuery ajax实现省市县三级联动
Mar 07 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
JavaScript实现的斑马线表格效果【隔行变色】
Sep 18 Javascript
详解Vue组件实现tips的总结
Nov 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
第九节 绑定 [9]
2006/10/09 PHP
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
php Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
解析isset与is_null的区别
2013/08/09 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
js 处理URL实用技巧
2010/11/23 Javascript
实现只能输入数字的input不用replace方法
2013/09/12 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
vue多页面开发和打包正确处理方法
2018/04/20 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
python搜索指定目录的方法
2015/04/29 Python
python中黄金分割法实现方法
2015/05/06 Python
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
Flask框架踩坑之ajax跨域请求实现
2019/02/22 Python
Django发送邮件功能实例详解
2019/09/02 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
Python接收手机短信的代码整理
2020/08/02 Python
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
医院护士求职自荐信格式
2013/09/21 职场文书
自行车租赁公司创业计划书
2014/01/28 职场文书
物流管理专业推荐信
2014/09/06 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
2014年教育工作总结
2014/11/26 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
幼儿园科学课教学反思
2016/03/03 职场文书
Django使用redis配置缓存的方法
2021/06/01 Redis
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技
Python学习之包与模块详解
2022/03/19 Python