Create bundle for message-bus-ajax

[nic-lan]

I have installed message_bus by doing

yarn add message_bus

and now in my package.json i can see the package version installed "^2.0.3-beta.2"

in the js i do :

MessageBus.subscribe('/channel', (data) => {
    console.log(data);
  })

and in the console when a event is published to the channel i receive the following error:

VM40:2 Uncaught SyntaxError: Unexpected token | in JSON at position 129
    at JSON.parse (<anonymous>)
    at Object.success (message-bus.js:175)
    at XMLHttpRequest.xhr.onreadystatechange

If i understand correctly the issue is generated here

after some investigation i can see that the issue is message-bus.js:257

  options.success(xhr.responseText);

where

responseText: "[{"global_id":-1,"message_id":-1,"channel":"/__status","data":{"/channel":1}}]
↵|
↵[]
↵|
↵"

which does not look very good to me.

Note

Also the javascript in this repo is different from what i see in the package installed with yarn.

To make a test i just tried to copy-paste the original source of the javascript in the repo and it worked as expected so i guess that the fix here is just release the right version of the javascript client in the npm or wherever is stored

:-)

[SamSaffron]

This looks related to chunked encoding. What browser are you using? What does your setup look like.

Payload is correct in that, this is how chucked encoding payloads are transported.

[nic-lan]

brave Version 1.13.82 Chromium: 85.0.4183.83 (Official Build) (64-bit)

it is a

• rails (6.0.3.3)
• ruby 2.7.1p83
• message_bus 2.0.3-beta.2 from npm

# config/initializers/message_bus.rb
Rails.application.config do |config|
  # See https://github.com/rails/rails/issues/26303#issuecomment-442894832
  CustomMessageBusMiddleware = Class.new(MessageBus::Rack::Middleware)
  config.middleware.delete(MessageBus::Rack::Middleware)
  config.middleware.insert_after(Warden::Manager, CustomMessageBusMiddleware)
end

MessageBus.configure(backend: :redis, url: "redis://#{ENV['REDIS_HOST']}:#{ENV['REDIS_PORT']}/0", namespace: ENV['REDIS_NAMESPACE'])

in the js client just

import MessageBus from 'message_bus'

MessageBus.start();
MessageBus.callbackInterval = 500;

MessageBus.subscribe('/channel', (data) => {
    console.log(data)
})

# config/puma.rb
...
on_worker_boot do
  MessageBus.after_fork
end
...

[nic-lan]

Any news about this ?

Note
Also the javascript in this repo is different from what i see in the package installed with yarn.
To make a test i just tried to copy-paste the original source of the javascript in the repo and it worked as expected so i guess that the fix here is just release the right version of the javascript client in the npm or wherever is stored

As i mentioned in the issue description, copying and pasting in my project the 2 files /assets/message-bus.js and /assets/message-bus-ajax.js which contain different code from the package in npm version 2.0.3-beta.2 fixed the issue I was facing.

Also the npm page shows that the last release was 3 years ago

At the same time the /assets/message-bus.js history shows that the last changes happened 1 month ago:

So my question here is:

is it possible that the npm package is somehow outdated or not in sync with the javascript files in this repo ?

[SamSaffron]

Also the npm page shows that the last release was 3 years ago

Oh this is a concern, I am guessing you are talking about a completely different npm package to the one @eviltrout published.

@smikhalevski appears to own this thing and is not associated with this project

[SamSaffron]

https://www.npmjs.com/package/message-bus-client is our official npm package.

[SamSaffron]

closing this @nic-lan as you appear to be using an unofficial npm package.

[nic-lan]

Sorry @SamSaffron

it took me a bit longer to answer

I changed the package to the official https://www.npmjs.com/package/message-bus-client as you suggested but now i am facing another error.

In particular I don't have the JQuery installed in my app so i receive:

message-bus.js:233 Uncaught Error: Either jQuery or the ajax adapter must be loaded
    at longPoller (message-bus.js:233)
    at poll (message-bus.js:443)
    at eval (message-bus.js:429)
longPoller @ message-bus.js:233
poll @ message-bus.js:443
eval @ message-bus.js:429
setTimeout (async)
poll @ message-bus.js:427
start @ message-bus.js:464
eval @ index.js:21
...

That makes sense because i did not required /assets/message-bus-ajax.js.
I would like to do that but when i check the code delivered in the npm packge i cannot find it.

Can it be that the additional ajax adapter is missing and must be added to the package ?

[SamSaffron]

This makes sense, yeah we should get message-bus-ajax into our bundle. (or make an optional bundle for it)

[nic-lan]

Hei hei
any news about this ?

[SamSaffron]

@nic-lan we will get to this.

@eviltrout what are your thoughts here, just add the optional -ajax file here:

message_bus/package.json

Line 8 in 12dd450

"jsnext:main": "assets/message-bus.js",

or should we make an extra package?

[eviltrout]

For Discourse's usage we already have jQuery ajax, so I wouldn't want to include it in the jsnext package. It would probably be better to create a new npm module for it to add the ajax function.

Another alternative would be to swap it out for the fetch api which is present in most browsers now. That depends on what the supported browsers are for message-bus @SamSaffron

[SamSaffron]

I think chunked encoding is pretty experimental in the fetch API https://web.dev/fetch-upload-streaming/

we could just use raw XMLHttp though and provide hooks so jQuery can override, not sure.

[eviltrout]

In that case I think the second module on npm is the way to go.

[nic-lan]

hei hei...
any news about this ?

[SamSaffron]

I hear you @nic-lan it is just this is so low on my priority list. Maybe @eviltrout can add to his list but I would not expect this to be done for at least a few more months.

For the time being can you just cut and paste the 20 lines of JS into your project?