2012-05-16 2 views
2

Я использую WebSockets в качестве соединения между сервером Node.js и кодом клиента JS.WebSocket JavaScript: отправка сложных объектов

Я хочу отправить несколько различных типов носителей (текст, аудио, видео, изображения) через сокет. Это, конечно, не сложно. message.data instanceof Blob отделяет текст от медиафайлов. Проблема в том, что я хочу добавить несколько дополнительных атрибутов в эти медиа-файлы.

F.e .:

  • Размер образа
  • Название изображения . , ,

Теперь я могу отправить одно сообщение, содержащее эту информацию, в текстовой форме и следить за ним с помощью другого сообщения, содержащего blob. я бы очень предпочел, хотя, чтобы быть в состоянии построить объект:

imageObject = { 

xDimension : '50px', 

yDimension : '50px', 

name : 'PinkFlowers.jpg' 

imageData : fs.readFileSync(".resources/images/PinkFlowers.jpg") 

} 

И отправить этот объект, как это через socket.send(imageObject).

До сих пор так хорошо, что это действительно работает, но как мне собрать объект и снова сделать его поля доступными в клиенте?

Я искал его какое-то время, и я был бы благодарен за любые идеи.

С наилучшими пожеланиями,

Палочки

ответ

4

Ну я получил его на работу с помощью base64.

На стороне сервера я бегу этот кусок кода:

var imageObject = newMessageObject('img', 'flower.png'); 
imageObject.image = new Buffer(fs.readFileSync('./resources/images/flower.png'), 'binary').toString('base64'); 
imageObject.datatype = 'png'; 
connection.send(JSON.stringify(imageObject)); 

Новый Buffer() необходимо обеспечить правильный кодировку UTF. Если вы используете без него, Chrome (не знаю, как Firefox и другие) выдает ошибку, эта недействительная кодировка utf8 была обнаружена и завершает выполнение после JSON.parse (message). Примечание: newMessageObject - это всего лишь метод построения объекта с двумя полями, типом и именем, которое я использую.

На стороне клиента его действительно прямо вперед:

websocketConnection.onmessage = function(evt) { 
    var message = JSON.parse(evt.data); 
    ... // Some app specific stuff 
    var image = new Image(); 
    image.onload = function() { 
    canvas.getContext("2d").drawImage(image, 0, 0); 
    } 

    image.src = "data:image/" + message.datatype + ";base64," + message.image; 

} 

Это рисует изображение на холсте.

Я не уверен, что это практически возможно для аудио- или видеофайлов, но для изображений он выполняет эту работу. Я, вероятно, вернусь к простому отправке зафуфированного URL вместо аудио/видеоданных и прочитав файлы непосредственно с сервера. Однако мне не нравятся последствия для безопасности.

Смежные вопросы