AngularJS:如何通过websocket发送文件? [英] AngularJS : How to send files via websocket?

问题描述

我是websocket的新手，并且已经分配了一个现有的工作聊天模块，该模块目前仅向其他用户发送消息.我被要求集成功能，以便用户可以相互发送附件".仅供参考，我碰到了此链接，该链接虽然没什么意思，但我需要更清楚

I am new to websocket and I have been assigned an existing working chat module which, for now, just sends messages to other users. I have been asked to integrate feature where a user can send "attachments" to each other. FYI, I came across this link which says few point but I need more clarity.

我的问题:

1. 那里实现它的服务器端要求是什么?
2. 有人可以提供详细的答案吗?更多的代码而不是单词受到高度赞赏.
3. 我是否需要使用对同一文件使用ng-file-up ，演示
4. 与此问题相关的任何链接

1. What is the server-side requirement there for its implementation?
2. Can someone provide a little elaborated answer? More codes rather than words are highly appreciated.
3. Do I need to use use ng-file-upload for the same, DEMO
4. Any relevant link for this question

更新1:

我尝试实现以下代码:

var input = document.querySelector('input[type=file]');

function readFile(event) {
    var ws_msg =  {content: event.target.result };
    // Here I call the ws.send method 
    send_chat_message($scope.sender, $scope.receiver , ws_msg );
}

function changeFile() {
    var file = input.files[0];
    var reader = new FileReader();
    reader.addEventListener('load', readFile);
    reader.readAsText(file);
}

input.addEventListener('change', changeFile);

选择文件会自动尝试通过ws发送文件，但由于某些奇怪的原因， WS连接将立即关闭.

Selecting a file automatically tries to send it over ws but for some weird reason, the WS connection is getting closed immediately.

推荐答案

我尝试了以下示例代码.我已经将 https://github.com/websockets/ws 用于网络套接字服务器.在HTML/jS中，我修改了如下代码，效果很好.步骤如下. (希望您已经安装了节点).

I have tried below sample code. I have used https://github.com/websockets/ws for web-socket server. and in HTML/jS I have modified code like below works fine. Steps are below. (Hope you have node installed).

1. 创建一个文件夹并进行npm安装--save ws

2. 创建一个server.js文件并添加以下代码.

1. Create a folder and do a npm install --save ws

2. Create a server.js file and add below code.

        const WebSocket = require('ws');

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

        wss.on('connection', function connection(ws) {
          ws.on('message', function incoming(message) {
            console.log('received: %s', message);
          });

          ws.send('something');
        });

使用节点server.js运行节点服务器，您的websocket服务器已在localhost:8080上启动

run node server using node server.js, your websocket server is up on localhost:8080

在浏览器中的js更改代码如下(您正在使用angular，请稍后根据需要进行更改)

In your browser js change code as below (you are using angular do the change accordingly later as per your requirement)

            var input = document.querySelector('input[type=file]');
        var socket = new WebSocket('ws://localhost:8080');

            socket.addEventListener('open', function (event) {
                socket.send('Hello Server!');
            });


        function readFile(event) {
            var ws_msg =  {content: event.target.result };
            socket.send(ws_msg);
            // Here I call the ws.send method 
            //send_chat_message($scope.sender, $scope.receiver , ws_msg );
        }

        function changeFile() {
            var file = input.files[0];
            var reader = new FileReader();
            reader.addEventListener('load', readFile);
            reader.readAsText(file);
        }

        input.addEventListener('change', changeFile);

加载您的JS/HTML并上传一个文件，您应该在节点服务器控制台中看到该文件以控制台日志.

load your JS/HTML and upload a file you should see to console logs in your node server console.

更新:

您可以更新节点js服务器代码:

you can update your node js server code:

            const WebSocket = require('ws');
            const fs = require('fs');

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


            wss.on('connection', function connection(ws) {
              ws.on('message', function incoming(message) {
                let data =  new Buffer(message);
                    fs.writeFile('new.png', data, 'binary', function (err) {
                        if (err) {
                            console.log("error")
                        }
                        else {
                            console.log("done")
                        }
                    });
              });

参考:在Node.js中从ArrayBuffer创建图像

              ws.send('something');
            });

和客户端(浏览器端js)代码为:

And client(browser side js) code as:

            var input = document.querySelector('input[type=file]');
            var socket = new WebSocket('ws://localhost:8080');

                socket.addEventListener('open', function (event) {
                    socket.send('Hello Server!');
                });

            function readFile(e) {
                //var ws_msg =  {content: event.target.result };
                 var rawData = e.target.result;
                 socket.send(rawData);
                // Here I call the ws.send method 
                //send_chat_message($scope.sender, $scope.receiver , ws_msg );
            }

            function changeFile() {
                var file = input.files[0];
                var reader = new FileReader();  
                reader.addEventListener('load', readFile);
                reader.readAsArrayBuffer(file);
            }

            input.addEventListener('change', changeFile);

这篇关于AngularJS:如何通过websocket发送文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！