Decode protobuf in react

[dancesWithCycles]

protobuf.js version: ~6.8.6

Hi folks, Thank you very much for maintaining this repository. I am trying to decode a message with protobuf.js in react that was encoded and send in a node.js/express.js server also with protobuf.js. I did not find any examples or tutorials in the web. Do you guys know any?

My goal is to encode a message in a node.js/express.js server send it to a react.js front end app and decode and show the message.

Here is my node.js server file that seems to be working quite well:

let path = require('path')
let express = require('express')
let app = express()

let messages = [
  {text: 'hey', lang: 'english'},
  {text: 'isänme', lang: 'tatar'},
  {text: 'hej', lang: 'swedish'}
]

let publicFolderName = 'public'

const debug = require('debug')('gtfs');

app.use(express.static(publicFolderName))
app.use (function(req, res, next) {
  if (!req.is('application/octet-stream')) return next()
  var data = [] // List of Buffer objects
  req.on('data', function(chunk) {
      data.push(chunk) // Append Buffer object
  })
  req.on('end', function() {
    if (data.length <= 0 ) return next()
    data = Buffer.concat(data) // Make one large Buffer of it
    debug('Received buffer', data)
    req.raw = data
    next()
  })
})
let ProtoBuf = require('protobufjs')
let builder = ProtoBuf.loadProtoFile(
  path.join(__dirname,
  publicFolderName,
  'message.proto')
)
let Message = builder.build('Message')

app.get('/api/messages', (req, res, next)=>{
  let msg = new Message(messages[Math.round(Math.random()*2)])
  debug('Encode and decode: ',
    Message.decode(msg.encode().toBuffer()))
  debug('Buffer we are sending: ', msg.encode().toBuffer())
  // res.end(msg.encode().toBuffer(), 'binary') // alternative
  res.send(msg.encode().toBuffer())
  // res.end(Buffer.from(msg.toArrayBuffer()), 'binary') // alternative
})

//...

app.all('*', (req, res)=>{
  res.status(400).send('Not supported')
})

app.listen(3000)

Here is my main.js file for the react front end to decode and show the message:

import React, {useState,useEffect} from 'react';  
//send HTTP GET
import axios from 'axios';
import decode from './gtfsRtDecode';
import api from './api'
import {grab,options} from "./apiPlain";
import API_JSON from './apiJson';
import API_GTFS from './apiGtfs';
import ProtoBuf from 'protobufjs';
const Main=()=>{      
    const [msgFeeds,setMsgFeeds]=useState([]);
    const [locations, setLocations]=useState([]);

          const Message = ProtoBuf
        .loadProtoFile('./message.proto', (err, builder)=>{
          Message = builder.build('Message')
          loadMessage()
        })

    useEffect(()=>{
        // setting interval: similar to ComponentDidMount
        const timer=setInterval(()=>{

	    //PROTOBUF
        axios.get('http://127.0.0.1:3000/api/messages', {responseType: 'arraybuffer'})
          .then(function (response) {
            console.log('PROTOBUF response: ', response)
            let msg = Message.decode(response.data)
            console.log('Decoded message', msg)
            document.getElementById('content').innerText = JSON.stringify(msg, null, 2)
          })
          .catch(function (response) {
              console.log('PROTOBUF catch')
              console.log(response)
          })

Here is the error from the browser console:

Uncaught TypeError: protobufjs__WEBPACK_IMPORTED_MODULE_7___default().loadProtoFile is not a function
    Main main.js:31

Does anyone has experience with protobuf in react or can point me in the right direction for this issue?

Cheers, Stefan

[floydjones1]

Hey there stefan, I've done something similar but with just react and grpc server. You can take a look at my example repo. Should be easy to follow https://github.com/floydjones1/grpc-chatApp-react

[dancesWithCycles]

Hi @floydjones1 , Thank you so much for sharing. I'll check it out. Cheers!

[ben-xD]

Hey there stefan, I've done something similar but with just react and grpc server. You can take a look at my example repo. Should be easy to follow https://github.com/floydjones1/grpc-chatApp-react

The only issue with that example is that it doesn't use protobuf.js.