详解如何使用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 相关文章推荐
javascript 网页跳转的方法
Dec 24 Javascript
使用typeof判断function是否存在于上下文
Aug 14 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
微信小程序HTTP请求从0到1封装
Sep 09 Javascript
微信小程序 下拉刷新及上拉加载原理解析
Nov 06 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 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抽象类使用要点与注意事项分析
2015/02/09 PHP
UTF-8正则表达式如何匹配汉字
2015/08/03 PHP
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
Ajax 加载数据 练习代码
2017/01/05 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
Angular 数据请求的实现方法
2018/05/07 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
使用Bootstrap做一个朝代历史表
2019/12/10 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
详解Python中的type()方法的使用
2015/05/21 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
详解django中Template语言
2020/02/22 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
美化环境标语
2014/06/20 职场文书
小学生读书活动总结
2014/06/30 职场文书
家庭教育的心得体会
2014/09/01 职场文书
离婚财产分配协议书
2014/10/21 职场文书
黄石寨导游词
2015/02/05 职场文书
员工自我工作评价
2015/03/06 职场文书
学校通报表扬范文
2015/05/04 职场文书
法律服务所工作总结
2015/08/10 职场文书
PHP控制循环操作的时间
2021/04/01 PHP
pycharm代码删除恢复的方法
2021/06/26 Python
Nginx缓存设置案例详解
2021/09/15 Servers
python中redis包操作数据库的教程
2022/04/19 Python