使用JavaScript将文件发送到socket.io

时间:2018-09-07 04:08:31

标签: javascript php html node.js socket.io

我是socket.io的新用户,我将socket.io用于所创建的应用程序上的聊天功能。发送文件时出现问题。我尝试从互联网上搜索引用,它引用的是上传的套接字文件库。现在我对使用该库感到困惑,我被编写算法所束缚。所以我需要帮助来完成它,以便它可以平稳运行。现在,我将文件保存到数据库,并且目录使用PHP

我很抱歉我的英语不好^ _ ^

  

app.js

var siofu = require("socketio-file-upload");
var req_express = require('express'),
    app = req_express(), 
    server = require('http').createServer(app),
    io = require('socket.io').listen(server),
    fs = require('fs')

app.use(siofu.router);
server.listen(3001);

var clients = [];

io.sockets.on('connection', function (socket) {
    const uploader = new siofu();
    uploader.listen(socket);

    socket.on('private-message', function(data){
       console.log("data content nya "+data.content)
       socket.join(data.topik)
       io.to(data.topik).emit("new-message", {image: true, buffer: data.toString('base64')});
       console.log("Sending: " + data.content + " to " + data.topik);
    });

    socket.on('disconnect', function() {

       for(var name in clients) {
         if(clients[name].socket === socket.id) {
           delete clients[name];
           break;
         }
       }
       console.log('disconnected client')
    })
});
  

文件html

<script type="text/javascript">
$(document).ready(function() {
var socket = io.connect('http://localhost:3001');

$(document).on("click",".sendpesan",function(){

    var site = $("#site").val();
    var id_penerima = $("#id_penerima").val();
    var id_komen = $("#id_komen").val();
    var id_operator = $("#id_operator").val();
    var id_pengirim = $("#id_pengirim").val();
    var pesan = $("#pesan").val();
    var string="";
    var file_input = $("#uplaod");

    var file = document.getElementById("upload").files[0];
    var formdata = new FormData();

    formdata.append("site", site);
    formdata.append("userfile", file);
    formdata.append("id_penerima", id_penerima);
    formdata.append("id_pengirim", id_pengirim);
    formdata.append("id_komen", id_komen);
    formdata.append("id_operator", id_operator);
    formdata.append("pesan", pesan);

    $.ajax({
        type : 'POST',
        url  : "<?php echo base_url();?>index.php/Mors/save_pesan",         
        contentType: false,
        processData: false,
        data: formdata,
        success : function(response){

            //$("#do_upload_eviden .close").click();
            //alert('sukses');
            //file_input.replaceWith(file_input.val('').clone(true));

            toastr.options = {
                closeButton: true,
                progressBar: true,
                showMethod: 'slideDown',
                timeOut: 1500
            };

            var split = response.split("-");

            if(split[0]=="pesan berhasil disimpan"){
                toastr.success('Pesan Berhasil dikirim', 'INFORMASI');
                var uploader = new SocketIOFileUpload(socket);
                uploader.listenOnInput(file);
                socket.emit("private-message", {
                    "content": file,
                    "useridnya": id_pengirim,
                    "topik" : "komenid"+id_komen,
                });

            }else{
                toastr.success('Pesan Gagal dikirim', 'INFORMASI');
            }
            document.getElementById("chat_form").reset();


            $("#pesan").val(string);
            $('.text_filex').html('');   

        }
    });
});

var html ='';
socket.on("new-message", function(data){
    var img = new Image();
    img.src = 'data:image/jpeg;base64,' + data.buffer;


    var gambar ='';
    html ='<article id="chat-id-1" class="chat-item right">'+
                ' <a href="#" class="pull-right thumb-sm avatar"><img src="<?php echo base_url('assets/image/admin.png');?>" class="img-circle"></a>'+
                '<section class="chat-body">'+
                    '<div class="panel  bg bg-success text-sm m-b-none">'+
                        '<div class="panel-body" style="padding: 5px;">'+
                            '<span class="arrow right"></span>'+
                            ' <p class="m-b-none" > '+img+' '+data.content+' </p>'+
                        '</div>'+
                    '</div>'+
                    //'<small class="text-muted"><i class="fa fa-ok text-success"></i>'+data[i].waktu+' '+baca+'</small>'+
                '</section>'+
            '</article>'

    $("#show_data_chat").append(html);
});

0 个答案:

没有答案