如何为聊天应用程序中2个不同用户之间的每个对话腾出动态空间

时间:2019-12-27 19:05:47

标签: node.js express websocket socket.io

我的问题如下:我正在制作一个聊天应用程序,用于将连接到移动应用程序的用户与连接到Web应用程序的用户进行通信。 Web应用程序的用户可以与移动应用程序的任何用户对话,但是移动应用程序的每个用户只能与将成为每个应用程序管理员的Web用户对话。我需要的是他们只能看到移动应用程序的每个用户和Web用户之间的消息,我不想在同一频道上发送所有消息。我一直在阅读有关套接字io中称为“房间”的内容,但我不知道它们的工作原理。下面我给出一个简单的基本聊天示例。如果有人能说明我如何在其中包含房间的概念,我将不胜感激。

服务器节点

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var port = process.env.PORT || 4444;

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

io.on('connection', function(socket){

    socket.on('message', function(datos){
        console.log(datos.mensaje);
        io.emit('message', datos);

    });


});

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

客户端

<!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: #000; 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(130, 224, 255); border: none; padding: 10px; }
    #messages { list-style-type: none; margin: 0; padding: 0; }
    #messages li { padding: 5px 10px; }
    #messages li:nth-child(odd) { background: #eee; }
    #messages { margin-bottom: 40px }
  </style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
  <input id="m" autocomplete="off" /><button>Send</button>
</form>
<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(){
            datos={mensaje:$('#m').val(),id_user_from:242,id_user_to:1};
            socket.emit('message', datos);
            $('#m').val('');
            return false;
        });
        socket.on('message', function(datos){
            $('#messages').append($('<li>').text(datos.mensaje));

            window.scrollTo(0, document.body.scrollHeight);
        });



    });
</script>
</body>
</html>

0 个答案:

没有答案