详解如何使用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 相关文章推荐
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
父节点获取子节点的字符串示例代码
Feb 26 Javascript
JS判断、校验MAC地址的2个实例
May 05 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
JavaScript中文件上传API详解
Apr 01 Javascript
初探js和简单隐藏效果的实例
Nov 23 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
如何在CocosCreator里画个炫酷的雷达图
Apr 16 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中的UNICODE 编码与解码
2013/06/29 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
一起学写js Calender日历控件
2016/04/14 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
vue 计时器组件的实现代码
2017/09/14 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
简单了解JavaScript异步
2019/05/23 Javascript
vue实现计算器功能
2020/02/22 Javascript
python解析中国天气网的天气数据
2014/03/21 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
python求质数的3种方法
2018/09/28 Python
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
J2EE面试题大全
2016/08/06 面试题
工程概预算专业毕业生求职信
2013/10/04 职场文书
个人求职信范例
2014/01/29 职场文书
美术教学感言
2014/02/22 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
PHP获取学生成绩的方法
2021/11/17 PHP