详解如何使用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 相关文章推荐
子窗体与父窗体传值示例js代码
Aug 01 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
javascript时间函数大全
Jun 30 Javascript
jQuery的ready方法详解
Nov 27 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
js制作支付倒计时页面
Oct 21 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
validform表单验证的实现方法
Mar 08 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
Vue h函数的使用详解
Feb 18 Vue.js
微信小程序实现多选功能
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边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
php引用返回与取消引用的详解
2013/06/08 PHP
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
浅谈thinkphp的实例化模型
2015/01/04 PHP
php使用parse_url和parse_str解析URL
2015/02/22 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
VUEX 数据持久化,刷新后重新获取的例子
2019/11/12 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
2019/12/16 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
2020/04/21 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
Python关于反射的实例代码分享
2020/02/20 Python
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
介绍一下HTTP、HTTPS和SSL
2012/12/16 面试题
日期和时间问题
2015/01/04 面试题
计算机专业学生的自我评价
2013/12/15 职场文书
新闻学专业求职信
2014/07/28 职场文书
运动会400米加油稿(8篇)
2014/09/22 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
2014年社团工作总结范文
2014/11/27 职场文书
公务员处分决定书
2015/06/25 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书