详解如何使用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 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
javascript版的in_array函数(判断数组中是否存在特定值)
May 09 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
基于AngularJS实现表单验证功能
Jul 28 Javascript
浅谈Angularjs中不同类型的双向数据绑定
Jul 16 Javascript
JS 数组基本用法入门示例解析
Jan 16 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
浅谈JavaScript节流和防抖函数
Aug 25 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
玩转虚拟域名◎+ .
2006/10/09 PHP
关于Intype一些小问题的解决办法
2008/03/28 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
php自定义函数实现统计中文字符串长度的方法小结
2017/04/15 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
js getElementsByTagName的简写方式
2010/06/27 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
Python对切片命名的实现方法
2018/10/16 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
如何基于Python创建目录文件夹
2019/12/31 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
求职信范文英文版
2014/01/05 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
希特勒的演讲稿
2014/05/23 职场文书
大学迎新生标语
2014/10/06 职场文书
就业证明函
2015/06/17 职场文书
师德培训心得体会2016
2016/01/09 职场文书
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS