socket.io官网中使用express实现了一个最简单的IM即时聊天，今天我们使用koa来实现一下利用 socket.io 实现消息实时推送

框架准备

1.确保你本地已经安装好了nodejs和npm，使用koa要求node版本>7.6

2.在你需要的位置新建一个文件夹（官网的简单命名为chat-example）

3.进入项目目录，创建package.json文件：


  2. {
  3.  "name": "socket-chat-example",
  4.  "version": "0.0.1",
  5.  "description": "my first socket.io app",
  6.  "dependencies": {}
  7. }

4.命令行中使用npm安装，执行以下命令


  2. npm install --save koa koa-router http fs socket.io

接下来直接上代码

项目目录下直接新建index.js


  2. var Koa = require('koa');
  3. var app = new Koa();
  4. const Router = require('koa-router');
  5. const fs = require('fs');
  6. const server = require('http').createServer(app.callback());
  7. const io = require('socket.io')(server);
  9. // 首页路由
  10. let router = new Router();
  11. router.get('/', ctx => {
  12.   ctx.response.type = 'html';
  13.   ctx.response.body = fs.createReadStream('./index.html');
  14. });
  15. app.use(router.routes());
  17. // socket连接
  18. io.on('connection', (socket) => {
  19.   socket.on('chat message', (msg) => {
  20.     console.log('message: '+msg);
  21.     io.emit('chat message', msg);
  22.   });
  23.   socket.on('disconnect', () => {
  24.     console.log('user disconnected');
  25.   });
  26. });
  28. // 监听端口
  29. server.listen(3000, () => {
  30.   console.log('listening on *:3000');
  31. });

重点：
socket的连接方式是先建立server，它的获取方式不再是：


  2. var http = require('http').Server(app);
  3. var io = require('socket.io')(http);

而变成了：


  2. const server = require('http').createServer(app.callback());
  3. const io = require('socket.io')(server);

node8之后，function(){} 可以简化为 () => {}，写法上更加的简洁
页面index.html


  2. <!doctype html>
  3. <html>
  4.  <head>
  5.   <title>Socket.IO chat</title>
  6.   <style>
  7.    * { margin: 0; padding: 0; box-sizing: border-box; }
  8.    body { font: 13px Helvetica, Arial; }
  9.    form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
  10.    form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
  11.    form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
  12.    #messages { list-style-type: none; margin: 0; padding: 0; }
  13.    #messages li { padding: 5px 10px; }
  14.    #messages li:nth-child(odd) { background: #eee; }
  15.   </style>
  16.  </head>
  17.  <body>
  18.   <ul id="messages"></ul>
  19.   <form action="">
  20.    <input id="m" autocomplete="off" /><button>Send</button>
  21.   </form>
  22.   <script src="/socket.io/socket.io.js"></script>
  23.   <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
  24.    <script>
  25.      $(function () {
  26.        var socket = io();
  27.        $('form').submit(function(){
  28.          socket.emit('chat message', $('#m').val());
  29.          $('#m').val('');
  30.          return false;
  31.        });
  32.        socket.on('chat message', function(msg){
  33.          $('#message').append($('<li>').text(msg));
  34.        });
  35.      });
  36.    </script>
  37.  </body>
  38. </html>

index.html和官网的一样，不做任何改动

最后执行node index.js，打开浏览器，输入http://localhost:3000就可以实现最简单的聊天了

原文链接：https://my.oschina.net/u/3970421/blog/2998286

详解如何使用koa实现socket.io官网的例子的更多相关文章

  1. 如何使用koa实现socket.io官网的例子

    socket.io官网中使用express实现了一个最简单的IM即时聊天,今天我们使用koa来实现一下 ### 框架准备 确保你本地已经安装好了nodejs和npm,使用koa要求node版本> ...

  2. Java网络编程和NIO详解5：Java 非阻塞 IO 和异步 IO

    Java网络编程和NIO详解5:Java 非阻塞 IO 和异步 IO Java 非阻塞 IO 和异步 IO 转自https://www.javadoop.com/post/nio-and-aio 本系 ...

  3. 【面试】详解同步/异步/阻塞/非阻塞/IO含义与案例

    本文详解同步.异步.阻塞.非阻塞,以及IO与这四者的关联,毕竟我当初刚认识这几个名词的时候也是一脸懵. 目录 1.同步阻塞.同步非阻塞.异步阻塞.异步非阻塞 1.同步 2.异步 3.阻塞 4.非阻塞 ...

  4. NodeJS+Express+Socket.io的一个简单例子

    关键字:NodeJS,Express,Socket.io. OS:Windows 8.1 with update pro. 1.安装NodeJS:http://nodejs.org/. 2.初始化一个 ...

  5. route命令详解与使用实例 ，同时访问内外网

    route命令详解与使用实例     2011-10-18 12:19:41|  分类: 其他 |  标签:route   |字号 订阅   1.   使用背景 需要接入两个网络,一个是部署环境所在内 ...

  6. node源码详解（七） —— 文件异步io、线程池【互斥锁、条件变量、管道、事件对象】

    本作品采用知识共享署名 4.0 国际许可协议进行许可.转载保留声明头部与原文链接https://luzeshu.com/blog/nodesource7 本博客同步在https://cnodejs.o ...

  7. 《linux设备驱动开发详解》笔记——11内存与IO访问

    内存访问与映射是linux驱动常见操作,操作硬件时离不开内存的映射,本章比较重要. 11.1 CPU与内存.I/O 目前的嵌入式处理器,都不提供专门的I/O空间,而仅存在内存空间:各种外设寄存器都直接 ...

  8. MySQL 四种隔离级别详解，看完吊打面试官

    转发链接:https://zhuanlan.zhihu.com/p/76743929 什么是事务 事务是应用程序中一系列严密的操作,所有操作必须成功完成,否则在每个操作中所作的所有更改都会被撤消.也就 ...

  9. 关于socket.io的使用

    这段时间学习了socket.io,用它写了小项目,在此总结下它的基本使用方式和一些要点. socket.io是基于Node.js和WebSocket协议的实时通信开源框架,它包括客户端的JavaScr ...

随机推荐

  1. springboot+themeleaf+bootstrap访问静态资源/无法访问静态资源/图片

    在网页HTML上访问静态资源的正确写法例: 1.<img src="../../static/bootstarp/img/2.jpg"     th:src="@{ ...

  2. Java中一个普通的循环为何从10开始到99连续相乘会得到0？

    这是一块非常简单的Java代码片段: public class HelloWorld{ public static void main(String []args){ int product = 1; ...

  3. Python爬虫 使用selenium处理动态网页

    对于静态网页,使用requests等库可以很方便的得到它的网页源码,然后提取出想要的信息.但是对于动态网页,情况就要复杂很多,这种页面的源码往往只有一个框架,其内容都是由JavaScript渲染出来的 ...

  4. 【Flutter 实战】17篇动画系列文章带你走进自定义动画

    老孟导读:Flutter 动画系列文章分为三部分:基础原理和核心概念.系统动画组件.8篇自定义动画案例,共17篇. 动画核心概念 在开发App的过程中,自定义动画必不可少,Flutter 中想要自定义 ...

  5. CobaltStrike与Metasploit联动配合

    利用CobaltStrike内置Socks功能 通过Beacon内置的Socks功能在VPS上开启代理端口,打通目标内网通道,之后将本地Metasploit直接带入目标内网,进行横向渗透. 首先,到已 ...

  6. 超简单集成华为HMS ML Kit文本识别SDK，一键实现账单号自动录入

    前言   在之前的文章<超简单集成华为HMS Core MLKit通用卡证识别SDK,一键实现各种卡绑定>中我们给大家介绍了华为HMS ML Kit通用卡证识别技术是如何通过拍照自动识别卡 ...

  7. 神奇的BUG系列-01

    有时候遇见一个bug,感觉就是他了 其实他也不过是你职业生涯中写的千千万万个bug中的一员 你所要做的,是放下 日子还长,bug很多,不差这一个 就此别过,分手快乐 一辈子那么长,一天没放下键盘 你就 ...

  8. oeasy教您玩转linux010105详细手册man

    详细手册 回忆上节课 我们上节课学习了使用命令来了解命令 whatis 我们通过他来发出灵魂之问 whatis到底是干什么的?

  9. 【HttpRunner v3.x】笔记—7. 测试用例-teststeps-RunTestCase

    以前我在写接口自动化用例的时候,为了保证用例的独立性,需要在setUp里调用各种满足用例的一些前置条件,其中就不乏调用了其他测试用例中的方法. 而httprunner也是支持了这一项很重要的特性,通过 ...

  10. 20190928-01Redis五大数据类型之Hash和Zset 000 029