详解如何使用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 相关文章推荐
ASP中Sub和Function的区别说明
Aug 30 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
js模仿hover的具体实现代码
Dec 30 Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
Vue封装的组件全局注册并引用
Jul 24 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 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
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
php set_time_limit()函数的使用详解
2013/06/05 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
Ionic3实现图片瀑布流布局
2017/08/09 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
jQuery实现简单评论功能
2020/08/19 jQuery
react实现复选框全选和反选组件效果
2020/08/25 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
使用python装饰器验证配置文件示例
2014/02/24 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
Python逐行读取文件中内容的简单方法
2019/02/26 Python
Python实现京东秒杀功能代码
2019/05/16 Python
python pandas生成时间列表
2019/06/29 Python
python提取照片坐标信息的实例代码
2019/08/14 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
全球领先美式家具品牌:Ashley爱室丽家居
2017/08/07 全球购物
应用化学专业职业生涯规划书
2013/12/31 职场文书
《长征》教学反思
2014/04/27 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
副乡长民主生活会个人对照检查材料思想汇报
2014/10/01 职场文书
2014年药品销售工作总结
2014/12/16 职场文书
作弊检讨书范文
2015/05/06 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
2016优秀教师先进个人事迹材料
2016/02/25 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle