websocket初体验——打造一个聊天室

最新推荐文章于 2025-04-25 17:15:11 发布

dxgzg

最新推荐文章于 2025-04-25 17:15:11 发布

阅读量2.4k

点赞数

分类专栏：前端文章标签： websocket vue.js javascript

本文链接：https://blog.youkuaiyun.com/dxgzg/article/details/122195271

版权

前端专栏收录该内容

3 篇文章

订阅专栏

最近正好学了学原生JS，暑假实习也是利用nodejs做的项目，自己网站最近也升级了，最近也打算写一个游戏服务端，但苦于没找到合适的客户端，会C++首选是UE4，但为什么没有选呢？其一我的笔记本电脑是轻薄本且我的想法并不是大制作，后在github看到一个H5的球球大作战，一个人的那种，所以萌生了用H5做个简易的游戏客户端，学一学websocket

首先确保自己的电脑装了nodejs，websocket就是可以双向通信（客户端和服务端都可以接受数据和发送数据），而不是客户端发送请求，服务端响应，这个on函数可以理解为绑定了一个回调函数。on函数第一个参数就表示他的方法名字了

nodeJS代码如下

const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 8080 });

server.on('connection', function connection(fd, req) {
    const ip = req.socket.remoteAddress;
    const port = req.socket.remotePort;
    const clientName = ip + port;

    fd.on('message', function recv(message) {
        console.log('recv msg:', message.toString())
            // fd.send('received: ' + message + '(From Server)');
        server.clients.forEach(function each(client) {
            if (client.readyState === WebSocket.OPEN) {
                client.send(clientName + " -> " + message);
            }
        })
    });

    fd.on('close', function close() {
        console.log("连接关闭");
        console.log(req.socket.remoteAddress);
    });
    // ws.on('close',{})
    console.log("recv conection")
    fd.send('Hello Client');
});

客户端/前端用的是Vue框架和原生JS随便写写的

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.common.dev.js"></script>
</head>

<body>
    <div>
        <textarea rows="15" cols="30" id="importTEXT" disabled="disabled" style="resize:none;">
        </textarea>

    </div>
    <div id="div2">
        <textarea rows="5" cols="30" id="sendText" style="resize:none;" @keyup.enter="sendMsg"></textarea>
        <button @click="sendMsg">
            发送内容
        </button>
    </div>

    <script>
        function getId(idName) {
            return document.getElementById(idName)
        }

        const url = 'ws://127.0.0.1:8080'
        const socket = new WebSocket(url);
        let myText = getId('importTEXT')
            // Connection opened
        socket.addEventListener('open', function(event) {
            socket.send('Hello Server!');
        });

        // Listen for messages
        socket.addEventListener('message', function(event) {
            console.log('Message from server ', event.data);
            myText.value += event.data + '\r\n'

        });
        let div1 = new Vue({
            el: '#div2',
            methods: {
                sendMsg: function() {
                    let stext = getId('sendText')
                    console.log(stext)
                    let str = stext.value;
                    stext.value = ""
                    console.log(str);
                    socket.send(str);
                }
            }

        });
    </script>
</body>

</html>