Saturday, 29 April 2017

error when using pusher in nodeJS

I'm new to Node.JS. and I intended to build a realtime chat room with pusher. I follow the tutorial in website of Pusher "Making ReactJS Realtime With Websockets" https://blog.pusher.com/making-reactjs-realtime-with-websockets/ the difference is I use nodeJs as backend server, I get error as "pusher.js:372 WebSocket connection to 'wss://ws.pusherapp.com/app/[object%20Object]?protocol=7&client=js&version=4.1.0&flash=false' failed: Error during WebSocket handshake: Unexpected response code: 502"

and errors "XMLHttpRequest cannot load http://sockjs.pusher.com/pusher/app/[object%20Object]/417/cqqjmnm0/xhr?protocol=7&client=js&version=4.1.0&t=1493516587238&n=24. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin is therefore not allowed access. The response had HTTP status code 404."

and here is my Main.js which connect the Pusher and should be able to receive message

constructor(props) {
    super(props);
    this.state = {messages: []};
    this._onMessage = this._onMessage.bind(this);
}

componentWillMount() {
    this.pusher = new Pusher({
        appId: '',
        key: '',
        secret: '',
        encrypted: true
    });
    this.chatRoom = this.pusher.subscribe('messages');
}

componentDidMount() {
    this.chatRoom.bind('new_message', function(message){
        this.setState({messages: this.state.messages.concat(message)})
    }, this);
}

_onMessage(e) {
    if (e.nativeEvent.keyCode !== 13) return;

    let input = e.target;
    let text = input.value;

    // if the text is blank, do nothing
    if (text === "") return;

    let message = {
        username: this.props.username,
        text: text,
        time: new Date()
    };

    let request = new Request('http://localhost:3000/notification', {
        method: 'POST',
        cache: false,
        context: message
    });

    fetch(request).then(function(response) {
        if(response.status === 200) {
            console.log("success");
            input.value = "";
        }
        else console.log("fail");
    })
}

and this is my Node.js server router.post('/notification', function (req, res, next) {

let pusher = new Pusher({
    appId: '333442',
    key: 'f4a5f819abf18922c4e7',
    secret: 'bbf4266f4f9469e04653',
    encrypted: true
});

pusher.trigger('messages', 'new_message', {
    "message": "hello world",
});

res.status(200);

});

what happen is I can see res.status(200) in my console but I can't receive message from pusher.

and I have include following in my index.html

  <script>

      // Enable pusher logging - don't include this in production
      Pusher.logToConsole = true;

      var pusher = new Pusher('', {
          encrypted: true
      });


      var channel2 = pusher.subscribe('messages');
      channel2.bind('my-event', function(data) {
          alert(data.message);
      });
  </script>

Anyone has the same problem? I'm confused about the reason that I cannot receive message from Pusher



via Qi Lyu

No comments:

Post a Comment