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);
}
});
ctx.websocket.on("close", (message) => {
/* 连接关闭时, 清理 上下文数组, 防止报错 */
let index = ctxs.indexOf(ctx);
ctxs.splice(index, 1);
});
});
前端代码 ( 该页面可同时打开多个进行聊天 )
<!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" />
<input type="button" value="关闭" id="close" />
</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);
}
/* 关闭消息 */
document.getElementById("close").addEventListener("click", function () {
webSocket.close();
});
</script>
</html>
Node + H5 + WebSocket + Koa2 实现简单的多人聊天的更多相关文章
- 基于SpringBoot+WebSocket搭建一个简单的多人聊天系统
前言 今天闲来无事,就来了解一下WebSocket协议.来简单了解一下吧. WebSocket是什么 首先了解一下WebSocket是什么?WebSocket是一种在单个TCP连接上进行全双工 ...
- Linux Socket多线程实现简单的多人聊天（pend）
Server: 设置可聊天数为5,为每一个client创建一个线程,这个线程负责接收client的聊天内容并发给其他用户看. 用mutex同步各个线程修改聊天室空余聊天位. Client: 主线程负责 ...
- node.js Websocket实现扫码二维码登录---GoEasy
最近在做一个扫码登录功能,为此我还在网上搜了一下关于微信的扫描登录的实现方式.当这个功能完成了后,我决定将整个实现思路整理出来,方便自己以后查看也方便其他有类似需求的程序猿些. 要实现扫码登录我们需要 ...
- node.js Websocket消息推送---GoEasy
Goeasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送!个人感觉goeasy推送更稳定,推送 速度快,代码简单易懂上手快 浏览器兼容性:GoEasy推送 支持websocket ...
- 基于Node.js + WebSocket 的简易聊天室
代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...
- WebSocket就是这么简单
前言 今天在慕课网上看到了Java的新教程(Netty入门之WebSocket初体验):https://www.imooc.com/learn/941 WebSocket我是听得很多,没有真正使用过的 ...
- Node.js+websocket+mongodb实现即时聊天室
ChatRoom Node.js+websocket+mongodb实现即时聊天室 A,nodejs简介:Node.js是一个可以让javascript运行在服务器端的平台,它可以让javascrip ...
- 实现node端渲染图表的简单方案
实现node端渲染图表的简单方案 这个题目有点小,本篇博客真正谈论的应该是服务端生成图表的简单方案,这里面有两个关键字:服务端 & 简单,我们知道基于js有很多的图表库,知名的如D3.echa ...
- Node.js 环境搭建及简单应用
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型.如果你想创建自己的服务,那么Node.js是一个非 ...
随机推荐
- js循环总结
js原生的循环有两种,一般的for循环和for...in循环.还有一种常用jQuery.each()循环. 一. js原生循环 a. for循环,代码如下: var myArray = [1,2,3] ...
- 阿里云流计算专场-GitHub上相关文档
阿里云流计算专场-GitHub路径:https://github.com/Alibaba-Technology/hangzhouYunQi2017ppt
- load-display-image之c#版
基本功能 能够从文件load图像 -->显示图像-->在图像上方显示graphics,比如几条线-->鼠标移动,显示鼠标位置的灰度 load-display-image之c#版 lo ...
- php 图片剪切
<?php /** * 图像裁剪 * @param $source_path 原图路径 * @param $target_width 需要裁剪的宽 * @param $target_height ...
- ser2net的编译及测试
1. 将ser2net编译进内核 1.1 make menuconfig 1.2 选上ser2net NetWork——>ser2net 2. 烧写固件 3.ser2net配置文件: 修改/et ...
- ML(4.1): R C4.5
决策树模型中最为流行的是C4.5算法, 该类算法70年代末,J Ross Quinlan提出ID3算法,此算法的目的在于减少树的深度.但是忽略了叶子数目的研究.1993年,Quinlan本人以ID3 ...
- eclipse中的XML文件无法快捷键注释问题
好多朋友都发现在ME6.0或跟高版本中“Ctrl+Shift+c”或者是“Ctrl+Shift+/”快捷键无论你怎么点,它就是不起作用,恼火吧? 百度 还是 google 都没有找到 合理的说法,更有 ...
- 【ActiveMQ入门-9】ActiveMQ学习-与Spring集成2
概述: 下面将介绍如何在Spring下集成ActiveMQ. 消费者:同步接收: 目的地:Queue 环境: 共5个文件 Receiver.java ReceiverTest.java Sender. ...
- bzoj4693: 雪中送温暖
Description 每年的1月10日是温暖节,在这一天,化身出题人的C_SUNSHINE将会给OIer们送温暖.OIer们只要在门口放上一个 仙人掌,就能在早上的某个时刻听到门外传来一声:“开门, ...
- springMVC学习(8)-数据回显
什么是数据回显: 提交后,如果出现错误(或者别的情况),将刚才提交的数据回显到刚才的提交页面. pojo数据回显方法: 一.springmvc默认对pojo数据进行回显. 比如现在的jsp页面提示出现 ...