码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-08-27 15:22:20      阅读:3422      评论:0      收藏:0      [点我收藏+]

标签:script   node   协议   console   lan   let   发送   ons   Koa   

服务器代码  ( 依赖于 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>

 

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

标签:script   node   协议   console   lan   let   发送   ons   Koa   

原文地址:http://www.cnblogs.com/lovling/p/7440360.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!