koa + websocket + vue实现简单的聊天

最新推荐文章于 2024-08-13 08:54:53 发布

zzz_97

最新推荐文章于 2024-08-13 08:54:53 发布

阅读量1.2k

点赞数 2

分类专栏： web前端文章标签： websocket vue

本文链接：https://blog.csdn.net/liluo101/article/details/117381169

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

使用koa2.x koa-websocket vue2.x

1.首先用koa创建websocket服务

/* 实例化外部依赖 */
var Koa = require("koa");
var WebSocket = require("koa-websocket");
var app = WebSocket(new Koa());
var ctxs = []; //用来保存ctx对象 用以广播信息

// 开启 监听端口
app.listen(8080, () => {console.log('server is running at 8080')});


/* websoket把收到的信息转发给出了自己的所有客户端 */
app.ws.use((ctx, next) => {
    /* 每打开一个连接就往 上线文数组中 添加一个上下文 */
    ctxs.push(ctx);
    ctx.websocket.send("server connected")
    ctx.websocket.on("message", (message) => {
        for(let i = 0; i < ctxs.length; i++) {
            if (ctx != ctxs[i]) {
                ctxs[i].websocket.send(message)
            }
        }
    });
    
    // 客户端主动断开链接时候用 可以先不管
    ctx.websocket.on("close", (message) => {
        /* 连接关闭时, 清理 上下文数组, 防止报错 */
        let index = ctxs.indexOf(ctx);
        ctxs.splice(index, 1);
    });
});

2.编写客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webSocket</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="inputV">
        <button @click="send">send</button>
        <ul>
            <li 
            v-for="item in messages" 
            :key="item + Math.random()">
                {{item}}
            </li>
        </ul>
    </div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            inputV: '',
            messages: [],
            webSocket: null
        },
        mounted() {
            var websocketURL = "ws://localhost:8080"
            /*websocket 兼容*/
            if(window.WebSocket) {
                this.webSocket = new WebSocket(websocketURL);
            } else {
                if(window.MozWebSocket) {
                    this.webSocket = new MozWebSocket(websocketURL)
                } else {
                    console.error("your browser is not support websocket!")
                    <!-- 不知道为什么 这里不能写return(报错) 求指教 -->
                    return
                }
            }
            
            /* 接收到服务端的消息时 */
            this.webSocket.onmessage =  (event) => {
                this.messages.push(event.data)
            };

            /* 关闭时 */
            this.webSocket.onclose = function () {
                console.log("关闭连接");
            };
        },
        methods: {
            send: function(){
                this.webSocket.send(this.inputV)
            }
        },
        
    })
</script>

</html>

工程化的Vue暂时还没写，这是在界面直接引入的vue，不知道在用脚手架创建项目的时候是不是一样的写法，欢迎指正。