详解如何使用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 checkbox全选/取消全选实现代码
Nov 14 Javascript
Ext grid 添加右击菜单
Nov 26 Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
js 判断图片是否加载完以及实现图片的预下载
Aug 14 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
微信小程序tabBar底部导航中文注解api详解
Aug 16 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
JS实现返回上一页并刷新页面的方法分析
Jul 16 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
微信小程序实现多选功能
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中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
广告显示判断
2006/08/31 Javascript
javascript 打印页面代码
2009/03/24 Javascript
Jquery 组合form元素为json格式,asp.net反序列化
2009/07/09 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
zTree树形插件异步加载方法详解
2017/06/14 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
Javascript实现跨域后台设置拦截的方法详解
2017/08/04 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
Python 如何访问外围作用域中的变量
2016/09/11 Python
Django CBV类的用法详解
2019/07/26 Python
如何基于Python实现数字类型转换
2020/02/07 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
html5 input属性使用示例
2013/06/28 HTML / CSS
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
娱乐地球:Entertainment Earth
2020/01/08 全球购物
同学会邀请书大全
2014/01/12 职场文书
企业军训感言
2014/02/08 职场文书
优秀会计求职信
2014/07/04 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
英语通知范文
2015/04/22 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
开发微信小程序之WXSS样式教程
2022/04/18 HTML / CSS