详解如何使用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吗?
Feb 24 Javascript
jQuery代码优化之基本事件
Nov 01 Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
vue中遇到的坑之变化检测问题(数组相关)
Oct 13 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 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
咖啡的植物学知识
2021/03/03 咖啡文化
PHP 创建标签云函数代码
2010/05/26 PHP
php开发过程中关于继承的使用方法分享
2011/06/17 PHP
Zend的Registry机制的使用说明
2013/05/02 PHP
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
判断颜色是否合法的正则表达式(详解)
2017/05/03 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
python中使用mysql数据库详细介绍
2015/03/27 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
详解python深浅拷贝区别
2019/06/24 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
Python使用graphviz画流程图过程解析
2020/03/31 Python
Python利用for循环打印星号三角形的案例
2020/04/12 Python
python re的findall和finditer的区别详解
2020/11/15 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
浅析HTML5中的 History 模式
2017/06/22 HTML / CSS
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
如何进行Linux分区优化
2013/02/12 面试题
超市优秀员工事迹材料
2014/05/01 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
沙滩主题婚礼活动策划方案
2014/09/15 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书
MySql开发之自动同步表结构
2021/05/28 MySQL
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
Python安装使用Scrapy框架
2022/04/12 Python