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 学习笔记 选择器之三
Jul 23 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
javascript实现浏览器窗口传递参数的方法
Sep 03 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
Oct 30 Javascript
jquery获取复选框的值的简单实例
May 26 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
浅谈 Vue 项目优化的方法
Dec 16 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
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 学习路线与时间表
2010/02/21 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
js继承实现方法详解
2016/12/16 Javascript
JS实现iframe自适应高度的方法示例
2017/01/07 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
初试vue-cli使用HBuilderx打包app的坑
2019/07/17 Javascript
webpack3升级到webpack4遇到问题总结
2019/09/30 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
详解Django中的权限和组以及消息
2015/07/23 Python
python获取list下标及其值的简单方法
2016/09/12 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
python中的协程深入理解
2019/06/10 Python
基于FME使用Python过程图解
2020/05/13 Python
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
保荐人的岗位职责
2013/11/19 职场文书
毕业生自我鉴定
2013/12/04 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
大学文艺委员竞选稿
2015/11/19 职场文书
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang