用socket.io发私信

本文介绍了如何在socket.io中实现私信功能,通过指定socket.id向特定用户发送消息。示例展示了一个包含三个客户端的场景,客户端1向客户端2发送消息,客户端2向客户端3发送,客户端3再向客户端1发送,详细解释了服务器端的实现过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在socket.io中发私信其实就是定点对某个特定的socket.id发消息。
下面这个示例有三个一样的客户端, 客户端1发私信给客户端2,客户端2发私信给客户端3, 客户端3发私信给客户端1.

下面是三个客户端的html, 取之于官方范例:

<!doctype html>
<html>

<head>
    <title>Socket.IO chat</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font: 13px Helvetica, Arial;
        }

        form {
            background: #310707;
            padding: 3px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        form input {
            border: 0;
            padding: 10px;
            width: 90%;
            margin-right: .5%;
        }

        form button {
            width: 9%;
            background: rgb(75, 183, 216);
            border: none;
            padding: 10px;
        }

        #messages {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        #messages li {
            padding: 5px 10px;
        }

        #messages li:nth-child(odd) {
            background: #C3C8F3;
        }

        #messages {
            margin-bottom: 40px
        }

    </style>
</head>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>

    $(function () {
        var socket = io();
        $('form').submit(function () {
            socket.emit('chat message', $('#m').val());
            $('#m').val('');
            return false;
        });
        socket.on('chat message', function (msg) {
            $('#messages').append($('<li>').text(msg));
        });
    });

</script>

<body>
    <ul id="messages"></ul>
    <form action="">
        <input id="m" autocomplete="off" /><button>Send</button>
    </form>
</body>

</html>

下面是服务器端:

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);

app.get('/test', function (req, res) {
    res.sendFile(__dirname + '/chat.html');
});

var socketArr = []; //创建一个数组来存放所有连接的socket.id
io.on('connection', function (socket) {
    console.log('a user connected!');
    socket.emit('chat message', 'i am ' + socket.id); //连接后在客户端进行自我介绍,是哪个一个socket.id
    socketArr.push(socket.id); //把连接的socket.id都存入数组
    socket.on('chat message', function (msg) {
        var index = socketArr.indexOf(socket.id); //获得数组的index
        var id = index == socketArr.length - 1 ? socketArr[0] : socketArr[index + 1]; //选择私信的目标socket.id。
        //这是就是1发给2, 2发给3, 3发给1.
        //按照首尾相连的顺序传递发送消息
        socket.to(id).emit('chat message', 'from ' + socket.id + ':' + msg + ' to ' + id); //消息发到指定socket.id的客户端,并且标明是谁发给谁的
    });
});

http.listen(3000, function () {
    console.log('listening on *:3000');
});

运行后打开3个客户端试验。然后在每个客户端各发一个消息。

这里写图片描述

这里写图片描述

这里写图片描述

这里可以看到

  • *AAAC 发了消息给了 *AAAA
  • *AAAA发了消息给了 *AAAB
  • *AAAB发了消息给 *AAAC
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值