详解如何使用koa实现socket.io官网的例子


Posted in Javascript onNovember 04, 2018

socket.io官网中使用express实现了一个最简单的IM即时聊天,今天我们使用koa来实现一下

### 框架准备

1.确保你本地已经安装好了nodejs和npm,使用koa要求node版本>7.6

2.在你需要的位置新建一个文件夹(官网的简单命名为chat-example)

3.进入项目目录,创建package.json文件:

{
 "name": "socket-chat-example",
 "version": "0.0.1",
 "description": "my first socket.io app",
 "dependencies": {}
}

4.命令行中使用npm安装,执行以下命令

npm install --save koa koa-router http fs socket.io

### 接下来直接上代码

项目目录下直接新建index.js

var Koa = require('koa');
var app = new Koa();
const Router = require('koa-router');
const fs = require('fs');
const server = require('http').createServer(app.callback());
const io = require('socket.io')(server);

// 首页路由
let router = new Router();
router.get('/', ctx => {
  ctx.response.type = 'html';
  ctx.response.body = fs.createReadStream('./index.html');
});
app.use(router.routes());

// socket连接
io.on('connection', (socket) => {
  socket.on('chat message', (msg) => {
    console.log('message: '+msg);
    io.emit('chat message', msg);
  });
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

// 监听端口
server.listen(3000, () => {
  console.log('listening on *:3000');
});

重点:

socket的连接方式是先建立server,它的获取方式不再是:

var http = require('http').Server(app);
var io = require('socket.io')(http);

而变成了:

const server = require('http').createServer(app.callback());
const io = require('socket.io')(server);

node8之后,function(){} 可以简化为 () => {},写法上更加的简洁

页面index.html

<!doctype html>
<html>
 <head>
  <title>Socket.IO chat</title>
  <style>
   * { margin: 0; padding: 0; box-sizing: border-box; }
   body { font: 13px Helvetica, Arial; }
   form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
   form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
   form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
   #messages { list-style-type: none; margin: 0; padding: 0; }
   #messages li { padding: 5px 10px; }
   #messages li:nth-child(odd) { background: #eee; }
  </style>
 </head>
 <body>
  <ul id="messages"></ul>
  <form action="">
   <input id="m" autocomplete="off" /><button>Send</button>
  </form>
  <script src="/socket.io/socket.io.js"></script>
  <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
   <script>
     $(function () {
       var socket = io();
       $('form').submit(function(){
         socket.emit('chat message', $('#m').val());
         $('#m').val('');
         return false;
       });
       socket.on('chat message', function(msg){
         $('#message').append($('<li>').text(msg));
       });
     });
   </script>
 </body>
</html>

index.html和官网的一样,不做任何改动

最后执行node index.js,打开浏览器,输入http://localhost:3000就可以实现最简单的聊天了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
初探jquery——表单应用范例
Feb 20 Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
JS数组的常见用法实例
Feb 10 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
详解webpack+angular2开发环境搭建
Jun 28 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 Javascript
javaScript中indexOf用法技巧
Nov 26 Javascript
微信小程序实现多选功能
Nov 04 #Javascript
微信小程序实现无限滚动列表
May 29 #Javascript
微信小程序自定义轮播图
Nov 04 #Javascript
微信小程序实现带缩略图轮播效果
Nov 04 #Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 #Javascript
微信小程序实现下拉菜单切换效果
Mar 30 #Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 #Javascript
You might like
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
PHP5.3新特性小结
2016/02/14 PHP
使用PHP下载CSS文件中的所有图片【几行代码即可实现】
2016/12/14 PHP
通过DOM脚本去设置样式信息
2010/09/19 Javascript
jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍
2011/11/21 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
js日期、星座的级联显示代码
2014/01/23 Javascript
JS的get和set使用示例
2014/02/20 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
关于javascript事件响应的基础语法总结(必看篇)
2016/12/26 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
vue 解决路由只变化参数页面组件不更新问题
2019/11/05 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
微信小程序静默登录的实现代码
2020/01/08 Javascript
Python内置数据类型详解
2014/08/18 Python
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
分享Python字符串关键点
2015/12/13 Python
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
银行奉献演讲稿
2014/09/16 职场文书
2014年电教工作总结
2014/12/19 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
javaScript Array api梳理
2021/03/31 Javascript
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技