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 相关文章推荐
6个DIV 135或246间隔一秒轮番显示效果
Jul 24 Javascript
鼠标事件延时切换插件
Mar 12 Javascript
jQuery Ajax 实例全解析
Apr 20 Javascript
innerText和textContent对比及使用介绍
Feb 27 Javascript
js获取控件位置以及不同浏览器中的差别介绍
Aug 08 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
浅析JavaScript动画
Jun 10 Javascript
require.js的用法详解
Oct 20 Javascript
bootstrap table小案例
Oct 21 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 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短址转换实现方法
2015/02/25 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
php查询whois信息的方法
2015/06/08 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
YII2.0之Activeform表单组件用法实例
2016/01/09 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
5 cool javascript apps
2007/03/24 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
Javascript中For In语句用法实例
2015/05/14 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
python使用socket连接远程服务器的方法
2015/04/29 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
Django查询数据库的性能优化示例代码
2017/09/24 Python
win10下安装Anaconda的教程(python环境+jupyter_notebook)
2019/10/23 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
使用python求解二次规划的问题
2020/02/29 Python
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
好的演讲稿开场白
2013/12/30 职场文书
小学新学期教师寄语
2014/01/18 职场文书
浙大毕业生自荐信
2014/01/26 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
三方合作意向书范本
2015/05/09 职场文书
黄埔军校观后感
2015/06/10 职场文书
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android