AngularJS：如何通过 websocket 发送文件？

Question

我是 websocket 的新手，我被分配了一个现有的工作聊天模块，目前它只是向其他用户发送消息。我被要求集成用户可以相互发送“附件”的功能。仅供参考，I came across this link 说的很少，但我需要更清楚。

我的问题：

1. 对其实施的服务器端要求是什么？
2. 谁能提供一些详细的答案？高度赞赏更多代码而不是文字。
3. 我需要使用use ng-file-upload for the same,DEMO吗
4. 此问题的任何相关链接

更新 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 连接会立即关闭。

Answer 1

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

1. 创建一个文件夹并执行 npm install --save ws

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

           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');
           });
   

3. 使用 node server.js 运行节点服务器，你的 websocket 服务器在 localhost:8080 上运行

4. 在您的浏览器中，js 更改代码如下（您正在使用 angular，稍后根据您的要求进行相应的更改）

               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);
   

5. 加载您的 JS/HTML 并将您应该看到的文件上传到节点服务器控制台中的控制台日志。

更新：

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

            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")
                        }
                    });
              });

参考：Create image from ArrayBuffer in Nodejs

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

和客户端（浏览器端js）代码为：

            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);