socket.io 对话

最新推荐文章于 2021-03-23 22:18:39 发布

赵永盛

最新推荐文章于 2021-03-23 22:18:39 发布

阅读量430

点赞数

分类专栏：前端文章标签： node socket socket-io web对话

本文链接：https://blog.csdn.net/fantian001/article/details/78077823

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

说明：简单的实现了双方用户的文字通信，使用 node 来实现服务端功能

界面

这里写图片描述

客户端

<html>
    <head>
        <meta charset="utf-8">
        <title>socket.io</title>
        <script src="/socket.io/socket.io.js"></script>
    </head>
    <body>
        <div class="dialog1">
            <div>
                <textarea name="" id="content1" cols="30" rows="10" readonly></textarea>
            </div>
            <div>
                <input type="text" id="send1">
                <button id="sendBtn1">发送</button>
            </div>
        </div>

        <div class="dialog2">
            <div>
                <textarea name="" id="content2" cols="30" rows="10" readonly></textarea>
            </div>
            <div>
                <input type="text" id="send2">
                <button id="sendBtn2">发送</button>
            </div>
        </div>
    </body>
    <script>
        var host1 = 'http://localhost/from/001';
        var host2 = 'http://localhost/to/001';

        // 建立连接
        writeContent('content1', '客户端尝试建立到 ' + host1 + ' 的连接...');
        var user1_socket = io.connect(host1);

        writeContent('content2', '客户端尝试建立到 ' + host2 + ' 的连接...');
        var user2_socket = io.connect(host2);

        // 绑定事件监听和回调处理
        function bindCb(socket, type, cb) {
            socket.on(type, cb);
        }

        // 连接处理
        bindCb(user1_socket, 'news', function(data) {
            writeContent('content1', data);
        });
        bindCb(user2_socket, 'news', function(data) {
            writeContent('content2', data);
        });

        // 接收服务端消息
        bindCb(user1_socket, 'receive', function(data) {
            writeContent('content1', data); 
        });
        bindCb(user2_socket, 'receive', function(data) {
            writeContent('content2', data); 
        });

        // 发送消息
        function send(socket, data) {
            socket.emit('msg', data);
        }

        // 接收区写内容
        function writeContent(elId, data) {
            var content = document.getElementById(elId);
            content.value += data + '\n';
        }

        // 点击发送
        var sendFunc = function(socket, elId) {
            var data = document.getElementById(elId);
            send(socket, data.value);
            // 清空
            data.value = '';
        }

        document.getElementById('sendBtn1')
            .addEventListener('click', function() {
                sendFunc(user1_socket, 'send1');
            });
        document.getElementById('sendBtn2')
            .addEventListener('click', function() {
                sendFunc(user2_socket, 'send2');
            });

        // 回车发送
        document.getElementById('send1').addEventListener('keypress', function(e) {
            if (e.keyCode === 13) {
                document.getElementById('sendBtn1').click();
            }
        });
        document.getElementById('send2').addEventListener('keypress', function(e) {
            if (e.keyCode === 13) {
                document.getElementById('sendBtn2').click();
            }
        });

    </script>
    <style type="text/css">
        .dialog1, .dialog2 {
            display: inline-block;
            margin: 0 40px;
        }
    </style>
</html>

　服务端

var app = require('http').createServer(handler);
var port = 80;
var io = require('socket.io').listen(app);
var fs = require('fs');

app.listen(port);

function handler(req, res) {
    fs.readFile(__dirname + '/index.html', function(err, data) {
        if (err) {
            res.write(500);
            return res.send('Error loading index.html');
        }

        res.writeHead(200);
        res.end(data);
    });
}

// 连接队列
var connectList = []

// 消息处理函数
function msgHandler(connectList) {

    var bindCb = function(model) {
        // 接收客户端消息
        model.from.on('msg', function(data) {
            console.log('from: ' + data + '\n');
            send(model.to, data)
        });

        model.to.on('msg', function(data) {
            console.log('to: ' + data + '\n');
            send(model.from, data)
        });
    }

    // 回写信息
    var send = function(socket, data) {
        socket.emit('receive',data);
    }

    setInterval(function() {
        if (connectList.length) {
            var model = connectList.pop();
            if (model.from && model.to) {
                bindCb(model);
            } else {
                connectList.unshift(model);
            }
        }
    }, 1000);
}

io.of('/from/001').on('connection', function(socket) {
    socket.emit('news', '连接已建立');
    console.log('from 连接已建立');

    var that = this;

    var model = {
        id: that.name.match(/\d+/)[0],
        from: socket
    }

    connectList.push(model);
});

io.of('/to/001').on('connection', function(socket) {
    socket.emit('news', '连接已建立');
    console.log('to 连接已建立');

    var that = this;

    connectList.map(function(model) {
        if (model.id === that.name.match(/\d+/)[0]) {
            model.to = socket;

            return model;
        }
    });
});

io.sockets.on('disconnect', function(socket) {
    socket.emit('receive', 'client disconnected!');
});

msgHandler(connectList);