CODEWITHSUNDEEP
javascriptnode.jshtmlwebsockethttp-status-codes
Pazuzu
Pazuzu

Reputation: 303

426 Status: WebSockets with Node.js

Im currently switching my application from using Socket.io to HTML5 WebSockets. I'm assuming that my problem lies within the first couple lines of both the client and server. My browser keeps on replying with a 426 (Upgrade Required) status when I test my app on localhost. Please shed some light on my problem...

Server Code

"use strict";
var session = require('./chat-session'),
        serveStatic = require('serve-static'),
        server = require('http').createServer(),
        WebSocketServer = require('ws').Server,
        wss = new WebSocketServer({server: server, port: 8181}),
        express = require('express'),
        app = express();
        // Sockets with real-time data
        // io = require('socket.io').listen(server),
        // mongoose = require('mongoose');

app.use(express.static(__dirname + '/public')); // used for external files on client
let storage = session.default; // cache object for storage

// Routing refers to determining how an application responds to a client request to a particular endpoint
app.get('/', function(req, res){
    res.sendFile(__dirname + '/public/index.html');
});

wss.on('connection', function(client){

    client.on('join', (name) => {
        client.nickname = name;
        // check to see if nickname has been taken, if so, give random name
        if(storage.users.indexOf(client.nickname) !== -1) {client.nickname = randomName();}
        // tell all chatters that a new user has entered the room
        client.broadcast.emit("enter", "* " + client.nickname + " * has connected");

        storage.users.forEach((user) => {
            client.emit('add chatter', user);
        });

        client.broadcast.emit('add chatter', client.nickname);

        storage.channels.general.messages.forEach((message) => {
            client.emit("message", message.name + ": " + message.data, 'general');
        });

        storage.users.push(client.nickname);
    });

    client.on('message', (message, room) => {
        var nickname = client.nickname;
        client.broadcast.emit("message", nickname + ": " + message, room);
        client.emit("me", message); // send message to self

        storeMessage(nickname, message, room); // store the message in chat-session

        console.log(nickname + ' said: ' + message + " in room " + room);
    });

    // When client switches between tabs (rooms)
    client.on('switch', (room) => {
        storage.channels[room].messages.forEach((message) => {
            if (message.name === client.nickname) {
                client.emit("me", message.data, room);
            } else {
                client.emit("message", message.name + ": " + message.data, room);
            }
        });
    });

//  client.on('disconnect', () => {
//      client.emit('disconnect', "client")
//  });

});

//const PORT = 8080;
//server.listen(PORT);

Client Code

    // var server = io.connect("http://localhost:8080"); // connect to server
var server = new WebSocketServer("ws://localhost:8181");
var curRoom = $('.nav .active').attr('id'); // cache current room

server.on('connect', function(data){
        nickname = prompt("What is your nickname?");
        //while(nickname) TODO:make sure client cannot choose null
        server.emit('join', nickname); // notify the server of the users nickname
});

//server.on('disconnect', function(data){
//  server.emit('disconnect');
//});

// new chatter enters room
server.on('enter', function(data){
        $('#messages').append($('<li style="background:#33cc33; color:white">').text(data));
});

// connected users section
server.on('add chatter', function(name){
        var chatter = $('<li style="color:white; font-size:22px">' + name + '</li>').data('name', name);
        $('#users').append(chatter);
});

// users' send message
server.on('message', function(message, room){
        // only emit message to other users if they are in same channel
        if (curRoom === room) {
            $('#messages').append($('<li style="display:table; box-shadow: 6px 3px 8px grey;">').text(message));
            play(); // invoke function to play sound to other clients
            console.log('sound played here');
        }
});

// differentiate how the client sees their message
server.on('me', function(message){
        $('#messages').append($('<li style="background:#0066ff; color:white; display:table; box-shadow: 6px 3px 8px grey;">').text(message));
});

// Client submits message
$('#chat_form').submit(function(e){
        var message = $("#chat_input").val();
        server.emit('message', message, curRoom);
        $('#chat_input').val(''); // Make input box blank for new message
        return false; // prevents refresh of page after submit
});

Upvotes: 0

Views: 2921

Answers (1)

Sumeet Kumar Yadav
Sumeet Kumar Yadav

Reputation: 12995

Http 426 means that you are trying to connect unsupported web-socket version . You can check in the client headers for supported version .

Refer to RFC for more detail

https://www.rfc-editor.org/rfc/rfc6455#section-4.2.2

Upvotes: 0

Related Questions