Node + H5 + WebSocket + Koa2 实现简单的多人聊天

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

/* 实例化外部依赖 */
let Koa = require("koa2");
let WebSocket = require("koa-websocket");

/* 实例化 WebSocket, 实例化储存所有上线文数组 并分配监听的端口 */
let app = WebSocket(new Koa());
let ctxs = [];
app.listen(80);

/* 实现简单的接发消息 */
app.ws.use((ctx, next) => {
    ctxs.push(ctx);
    ctx.websocket.on("message", (message) => {
        console.log(message);
        for(let i = 0; i < ctxs.length; i++) {
            if (ctx == ctxs[i]) continue;
            ctxs[i].websocket.send(message);
        }
    });
});

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="content" />
    <input type="button" value="发送" id="send" />
</body>
<script type="text/javascript">
    /* 封装 WebSocket 实例化的方法  */
    var CreateWebSocket = (function () {
        return function (urlValue) {
            if(window.WebSocket) return new WebSocket(urlValue);
            if(window.MozWebSocket) return new MozWebSocket(urlValue);
            return false;
        }
    })();
    /* 实例化 WebSocket 连接对象, 地址为 ws 协议 */
    var webSocket = CreateWebSocket("ws://localhost");
    /* 接收到服务端的消息时 */
    webSocket.onmessage = function (msg) {
        console.log("服务端说:" + msg.data);
    };
    /* 关闭时 */
    webSocket.onclose = function () {
        console.log("关闭连接");
    };
    /* 发送消息 */
    document.getElementById("send").onclick = function () {
        var str = document.getElementById("content").value;
        webSocket.send(str);
    }
</script>
</html>
时间: 2024-10-23 16:22:49

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

Node.js websocket 使用 socket.io库实现实时聊天室

认识websocket WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duple).一开始的握手需要借助HTTP请求完成. 其实websocket 并不是很依赖Http协议,它也拥有自己的一套协议机制,但在这里我们需要利用的socket.io 需要依赖到http . 之前用java jsp写过一个聊天,其实实现逻辑并不难,只是大部分时间都用在UI的设计上,其实现原理就是一个基于websocket的通信,要想做一个好的聊天室,我觉得大部

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

Goeasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送!个人感觉goeasy推送更稳定,推送速度快,代码简单易懂上手快浏览器兼容性:GoEasy推送支持websocket 和polling两种连接方式,从而可以支持IE6及其以上的所有版本,同时还支持其它浏览器诸如Firefox, Chrome, Safari 等等.支 持不同的开发语言:   GoEasy推送提供了Restful API接口,无论你的后台程序用的是哪种语言都可以通过RestfulAPI来实现后台实时推送.

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

最近在做一个扫码登录功能,为此我还在网上搜了一下关于微信的扫描登录的实现方式.当这个功能完成了后,我决定将整个实现思路整理出来,方便自己以后查看也方便其他有类似需求的程序猿些. 要实现扫码登录我们需要解决两个问题: 1.  在没有输入用户名及密码的情况下,如何解决权限安全问题?换句话讲,如何让服务器知道扫码二维码的客户端是一个合法的用户? 2.  服务器根据用户在客户端的选择如何实时在网页上作出相应的响应? 首先我们先理一下微信的实现思路,来方便我们理解解决这一难题的思路方向.微信登录的二维码实

Node构建WebSocket服务

1,WebSocket和Http的区别? HTTP只能由客户端发起通信,不能主动获取实时数据.常用的方法轮询,就是用一个定时器,不停地发http请求(非常浪费资源). 我们希望的场景是这样的:服务端数据发生变化,主动向客户端推送最新信息,客户端也可以主动向服务器发送信息.这个时候 服务器推送技术WebSocket就出场了. 2,WebSocket 客户端提供的使用方法 //1,WebSocket 实例化 var ws = new WebSocket("ws://localhost:8181&qu

Node.js学习笔记(3) - 简单的curd

这个算是不算完结的完结吧,前段时间也是看了好久的Node相关的东西,总想着去整理一下,可是当时也没有时间: 现在看来在整理的话,就有些混乱,自己也懒了,就没在整理,只是简单的记录一下 一.demo的简单介绍 这次demo,只涉及到简单的curd操作,用到的数据库是mongo,所以要安装mongo数据库,数据库连接驱动是mongoose: 当然关于mongo的驱动有很多,比如mongous mongoskin等:(详见http://cnodejs.org/topic/4f4ca8e0940ce2e

Node.js操作Redis的简单示例

Redis是一个key-value类型的数据库,而key全部都是字符串,value可以是集合.hash.list等等. Redis是通过MULTI/DISCARD/EXEC/WATCH这4个命令来实现事务功能.对事务,我们必须知道事务安全性是一个非常重要的. 事务提供了一种"将多个命令打包,然后一次性.按顺序执行"的机制,并且在事务执行期间不会中断--意思就是在事务完成之前,客户端的其他命令都是阻塞状态. var redis = require("redis");

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

实现node端渲染图表的简单方案 这个题目有点小,本篇博客真正谈论的应该是服务端生成图表的简单方案,这里面有两个关键字:服务端 & 简单,我们知道基于js有很多的图表库,知名的如D3.echarts .highcharts等等,对于做数据可视化方向的同学可能自己都做过此类chart的研发,无论从零构建还是使用已有的轮子,基本上都是基于js在做,因为大部分数据可视化产品都是to B的产品. 但是有些场景下,我们还是会需要服务端的渲染结果的,比如,需要给用户发送订阅邮件,邮件中包含了图表类展示,我们

最新短视频网站实战教程 node.js+ES+Koa2基础到精通项目实战课程

下载地址:百度网盘下载 node.js+ES+Koa2项目实战课,课程目录很多,只展示了主要章节课程目录第1章 2018 年的编程姿势1-0 课前必看.mp41-1 koa2导学.mp41-2 安装跟进最新 node.js 版本.mp41-3 毫不犹豫的使用promise.mp41-4 使用babel 编译es7 async function.mp4 第2章 必会 ES6-7 语法特性与规范2-0 课前必读.mp42-1 生成器函数.mp42-2 co 库执行 promise 和 generat

实战 node.js+ES+Koa2基础到精通项目

node.js+ES+Koa2项目实战课,课程目录很多,只展示了主要章节课程目录第1章 2018 年的编程姿势1-0 课前必看.mp41-1 koa2导学.mp41-2 安装跟进最新 node.js 版本.mp41-3 毫不犹豫的使用promise.mp41-4 使用babel 编译es7 async function.mp4第2章 必会 ES6-7 语法特性与规范2-0 课前必读.mp42-1 生成器函数.mp42-2 co 库执行 promise 和 generator function.m