详解如何使用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 解析多维的Json数据格式
Nov 02 Javascript
JavaScript 学习技巧
Feb 17 Javascript
Jquery练习之表单验证实现代码
Dec 14 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
浅谈Node框架接入ELK实践总结
Feb 22 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 Javascript
详解React路由传参方法汇总记录
Nov 29 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项目开发中用到的快速排序算法分析
2016/06/25 PHP
Jquery 自定义动画概述及示例
2013/03/29 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
javascript学习指南之回调问题
2016/04/23 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
Node.js静态服务器的实现方法
2018/02/28 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
Python中super的用法实例
2015/05/28 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
师范生教师实习自我鉴定
2013/09/27 职场文书
工程造价专业大专生求职信
2013/10/06 职场文书
《雷雨》教学反思
2014/02/20 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
监督检查工作方案
2014/05/28 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
预备党员转正意见
2015/06/01 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android