详解如何使用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中的集合及效率
Jan 08 Javascript
iframe子父页面调用js函数示例
Nov 07 Javascript
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
跟我学习javascript的严格模式
Nov 16 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
使用vue-cli webpack 快速搭建项目的代码
Nov 21 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 Javascript
js实现九宫格抽奖
Mar 19 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
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
js随机生成一个验证码
2017/06/01 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
微信小程序实现弹出层效果
2020/05/26 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
通俗讲解python 装饰器
2020/09/07 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
台湾母婴用品限时团购:妈咪爱
2018/08/03 全球购物
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
邻里守望志愿服务活动方案
2014/08/15 职场文书
鸟的天堂导游词
2015/01/31 职场文书
如何写辞职书
2015/02/26 职场文书
2015年征兵工作总结
2015/07/23 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
django学习之ajax post传参的2种格式实例
2021/05/14 Python
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技
解决 redis 无法远程连接
2022/05/15 Redis