详解如何使用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 相关文章推荐
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
JavaScript操作XML文件之XML读取方法
Jun 09 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
jQuery+ajax的资源回收处理机制分析
Jan 07 Javascript
AngularJS学习笔记之表单验证功能实例详解
Jul 06 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
JS实现购物车基本功能
Nov 08 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
PhpMyAdmin中无法导入sql文件的解决办法
2010/01/08 PHP
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
详解js闭包
2014/09/02 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
react.js CMS 删除功能的实现方法
2017/04/17 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
详解js类型判断
2018/05/22 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
python Pexpect模块的使用
2020/12/25 Python
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
初中同学聚会邀请函
2014/02/03 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP