服务器代码  ( 依赖于 koa2,  koa-websocket )

  1. /* 实例化外部依赖 */
  2. let Koa = require("koa2");
  3. let WebSocket = require("koa-websocket");
  5. /* 实例化 WebSocket, 实例化储存所有上线文数组 并分配监听的端口 */
  6. let app = WebSocket(new Koa());
  7. let ctxs = [];
  8. app.listen(80);
  10. /* 实现简单的接发消息 */
  11. app.ws.use((ctx, next) => {
  12.     /* 每打开一个连接就往 上线文数组中 添加一个上下文 */
  13.     ctxs.push(ctx);
  14.     ctx.websocket.on("message", (message) => {
  15.         console.log(message);
  16.         for(let i = 0; i < ctxs.length; i++) {
  17.             if (ctx == ctxs[i]) continue;
  18.             ctxs[i].websocket.send(message);
  19.         }
  20.     });
  21.     ctx.websocket.on("close", (message) => {
  22.         /* 连接关闭时, 清理 上下文数组, 防止报错 */
  23.         let index = ctxs.indexOf(ctx);
  24.         ctxs.splice(index, 1);
  25.     });
  26. });

前端代码 ( 该页面可同时打开多个进行聊天 )

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <input type="text" id="content" />
  9.     <input type="button" value="发送" id="send" />
  10.     <input type="button" value="关闭" id="close" />
  11. </body>
  12. <script type="text/javascript">
  13.     /* 封装 WebSocket 实例化的方法  */
  14.     var CreateWebSocket = (function () {
  15.         return function (urlValue) {
  16.             if(window.WebSocket) return new WebSocket(urlValue);
  17.             if(window.MozWebSocket) return new MozWebSocket(urlValue);
  18.             return false;
  19.         }
  20.     })();
  21.     /* 实例化 WebSocket 连接对象, 地址为 ws 协议 */
  22.     var webSocket = CreateWebSocket("ws://localhost");
  23.     /* 接收到服务端的消息时 */
  24.     webSocket.onmessage = function (msg) {
  25.         console.log("服务端说:" + msg.data);
  26.     };
  27.     /* 关闭时 */
  28.     webSocket.onclose = function () {
  29.         console.log("关闭连接");
  30.     };
  31.     /* 发送消息 */
  32.     document.getElementById("send").onclick = function () {
  33.         var str = document.getElementById("content").value;
  34.         webSocket.send(str);
  35.     }
  36.     /* 关闭消息 */
  37.     document.getElementById("close").addEventListener("click", function () {
  38.         webSocket.close();
  39.     });
  40. </script>
  41. </html>

 

Node + H5 + WebSocket + Koa2 实现简单的多人聊天的更多相关文章

  1. 基于SpringBoot+WebSocket搭建一个简单的多人聊天系统

    前言   今天闲来无事,就来了解一下WebSocket协议.来简单了解一下吧. WebSocket是什么   首先了解一下WebSocket是什么?WebSocket是一种在单个TCP连接上进行全双工 ...

  2. Linux Socket多线程实现简单的多人聊天（pend）

    Server: 设置可聊天数为5,为每一个client创建一个线程,这个线程负责接收client的聊天内容并发给其他用户看. 用mutex同步各个线程修改聊天室空余聊天位. Client: 主线程负责 ...

  3. node.js Websocket实现扫码二维码登录---GoEasy

    最近在做一个扫码登录功能,为此我还在网上搜了一下关于微信的扫描登录的实现方式.当这个功能完成了后,我决定将整个实现思路整理出来,方便自己以后查看也方便其他有类似需求的程序猿些. 要实现扫码登录我们需要 ...

  4. node.js Websocket消息推送---GoEasy

    Goeasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送!个人感觉goeasy推送更稳定,推送 速度快,代码简单易懂上手快 浏览器兼容性:GoEasy推送 支持websocket ...

  5. 基于Node.js + WebSocket 的简易聊天室

    代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...

  6. WebSocket就是这么简单

    前言 今天在慕课网上看到了Java的新教程(Netty入门之WebSocket初体验):https://www.imooc.com/learn/941 WebSocket我是听得很多,没有真正使用过的 ...

  7. Node.js+websocket+mongodb实现即时聊天室

    ChatRoom Node.js+websocket+mongodb实现即时聊天室 A,nodejs简介:Node.js是一个可以让javascript运行在服务器端的平台,它可以让javascrip ...

  8. 实现node端渲染图表的简单方案

    实现node端渲染图表的简单方案 这个题目有点小,本篇博客真正谈论的应该是服务端生成图表的简单方案,这里面有两个关键字:服务端 & 简单,我们知道基于js有很多的图表库,知名的如D3.echa ...

  9. Node.js 环境搭建及简单应用

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型.如果你想创建自己的服务,那么Node.js是一个非 ...

随机推荐

  1. kettle--window开发环境和linux运行环境的迁移

    首先要做的是将kettle在linux下搭建好. 一.搭建linux的kettle环境 1.1解压 (my_python_env)[root@hadoop26 ~]# .zip -d /usr/loc ...

  2. ORTP&&RTSP

    ortp为了提高实时性使用UDP发送 rtsp建立了一个TCPserver,等待客户端连接,此时打开VLC播放器-->打开网络串流-->输入rtsp地址,会请求RTSP Server建立一 ...

  3. 在服务端处理同步发送小消息的性能上Kafka>RocketMQ>RabbitMQ

    在发送小消息的场景中,三个消息中间件的表现区分明显: Kafka的吞吐量高达17.3w/s,远超其他两个产品.这主要取决于它的队列模式保证了写磁盘的过程是线性IO.此时broker磁盘IO已达瓶颈. ...

  4. node 知识点

    问:局部安装如何使用npm run命令? 答:如果已局部安装了babel-cli(babel-cli自带babel-node命令),package.json文件配置如下: "scripts& ...

  5. Linq to sql 增删改查（转帖）

    http://blog.csdn.net/pan_junbiao/article/details/7015633   (LINQ To SQL 语法及实例大全) 代码 Code highlightin ...

  6. 【android】Android ADB 端口占用问题解决方案

    解决ADB端口占用问题 方式一5037为adb默认端口,若5037端口被占用,查看占用端口的进程PIDC:\Users\wwx229495>netstat -aon|findstr 5037  ...

  7. 详细说明 配置 Sublime Text 开发node.js（windows）包括sub2和sub3的区别

    1.先安装Sublime Text  2或者3皆可 2.下载 sublime Text 的nodejs插件 得到那个zip包(后面会介绍用Package Control安装) 3.下载后解压 直接改名 ...

  8. php 加密 解密 方法

    base64        Base64编码可用于在HTTP环境下传递较长的标识信息      base64_encode       base64_decodeserialize       可以将 ...

  9. linux svn服务器（一）

    先安装 参考文章http://www.cnblogs.com/zhaoyang-1989/articles/3455481.html

  10. ERROR 2059 (HY000): Authentication plugin 'caching_sha2_password' cannot be loaded

    问题: 连接Docker启动的mysql出现:ERROR 2059 (HY000): Authentication plugin 'caching_sha2_password' cannot be l ...