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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
jqplot通过ajax动态画折线图的方法及思路
Dec 08 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
Feb 26 Javascript
jquery制作select列表双向选择示例代码
Sep 02 Javascript
JavaScript自定义数组排序方法
Feb 12 Javascript
jquery实现的简单二级菜单效果代码
Sep 22 Javascript
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 Javascript
vue + axios get下载文件功能
Sep 25 Javascript
Vuex模块化应用实践示例
Feb 03 Javascript
vue基础知识--axios合并请求和slot
Jun 04 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
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
php实现简单文件下载的方法
2015/01/30 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
在IE上直接编辑网页内容的js代码(IE地址栏js)
2009/04/27 Javascript
基于JQuery的日期联动实现代码
2011/02/24 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
vue2的todolist入门小项目的详细解析
2017/05/11 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
详解Vue3 Composition API中的提取和重用逻辑
2020/04/29 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
Python爬取三国演义的实现方法
2016/09/12 Python
python中的内置函数max()和min()及mas()函数的高级用法
2018/03/29 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
python如何修改文件时间属性
2021/02/05 Python
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
android面试问题与答案
2016/12/27 面试题
20岁生日感言
2014/01/13 职场文书
触电现场处置方案
2014/05/14 职场文书