Develop Reference

WebSocket connection to 'wss://localhost:8000/game' failed ( Symfony, Ratchet )

I am trying to make a real time chat using symfony 6, ratchet and javascript however I can't connect to the localhost even though the URL seems to right one when I look at it in the console.
Here is my commander
<?php
namespace App\Command;
use Symfony\Component\Console\Command\Command;
use Symfony\Component\Console\Input\InputInterface;
use Symfony\Component\Console\Output\OutputInterface;
use Ratchet\App;
use Ratchet\Server\IoServer;
use Ratchet\Http\HttpServer;
use Ratchet\WebSocket\WsServer;
use App\Websocket\MessageHandler;
use App\Sockets\LiveChat;
class SocketCommand extends Command
{
protected function configure()
{
$this->setName('sockets:start-chat')
->setHelp("Starts the chat socket demo")
->setDescription('Starts the chat socket demo');
}
protected function execute(InputInterface $input, OutputInterface $output)
{
// $server = IoServer::factory(
// new HttpServer(
// new WsServer(
// new LiveChat()
// )
// ),
// 8000
// );
$output->writeln([
'Chat socket',
'============',
'Starting chat, open your browser.',
]);
//$app = new App('localhost', 8000, '127.0.0.1');
$app = new \Ratchet\App('127.0.0.1', 8000, '0.0.0.0');
$app->route('/game', new LiveChat);
$app->run();
}
}
Here is the code that inits the websocket
<?php
namespace App\Sockets;
use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;
use SplObjectStorage;
class LiveChat implements MessageComponentInterface
{
protected $clients;
public function __construct()
{
$this->clients = new SplObjectStorage;
}
public function onOpen(ConnectionInterface $conn)
{
$this->clients->attach($conn);
echo "New connection! ({$conn->resourceId})\n";
}
public function onMessage(ConnectionInterface $from, $msg)
{
$numRecv = count($this->clients) - 1;
echo sprintf('Connection %d sending message "%s" to %d other connection%s' . "\n", $from->resourceId, $msg, $numRecv, $numRecv == 1 ? '' : 's');
foreach ($this->clients as $client) {
if ($from !== $client) {
// The sender is not the receiver, send to each client connected
$client->send($msg);
}
}
}
public function onClose(ConnectionInterface $conn)
{
// The connection is closed, remove it, as we can no longer send it messages
$this->clients->detach($conn);
echo "Connection {$conn->resourceId} has disconnected\n";
}
public function onError(ConnectionInterface $conn, \Exception $e)
{
echo "An error has occurred: {$e->getMessage()}\n";
w $conn->close();
}
}
and last but not least the javascript to connect to the websocket
var clientInformation = {
username: new Date().getTime().toString()
// You can add more information in a static object
};
var conn = new WebSocket('wss://localhost:8000/game');
console.log(conn);
conn.onopen = function(e) {
console.info("Connection established succesfully");
};
conn.onmessage = function(e) {
var data = JSON.parse(e.data);
Chat.appendMessage(data.username, data.message);
console.log(data);
};
conn.onerror = function(e) {
alert("Error: something went wrong with the socket.");
console.error(e);
};
document.getElementById("form-submit").addEventListener("click", function() {
var msg = document.getElementById("form-message").value;
if (!msg) {
alert("Please send something on the chat");
}
Chat.sendMessage(msg);
document.getElementById("form-message").value = "";
}, false);
var Chat = {
appendMessage: function(username, message) {
var from;
if (username == clientInformation.username) {
from = "me";
} else {
from = clientInformation.username;
}
var ul = document.getElementById("chat-list");
var li = document.createElement("li");
li.appendChild(document.createTextNode(from + " : " + message));
ul.appendChild(li);
},
sendMessage: function(text) {
clientInformation.message = text;
conn.send(JSON.stringify(clientInformation));
this.appendMessage(clientInformation.username, clientInformation.message);
}
};
Any help would be really appreciated,
Thank you !

I think, you should use WS with localhost and WSS for secured WS using the assigned IP not localhost.
var conn = new WebSocket('ws://localhost:8000/game'); // try changing WSS -> WS

Creating an hour in Perl using MySql and the Websocket protocol

Good afternoon, I'm writing chat in Perl using Mysql and the Websocket protocol.
I am using the AnyEvent module and Protocol :: WebSocket.
I understand that it would be better to use Mojo or Node.js for this, but in my case it needs to be that way.
I receive data from Websocket, reverse and connect. The data entered in the input field also fits into the database.
My problem is that how can I now output this data to the web interface in real time.
#!/usr/bin/env perl
use strict;
use warnings;
use AnyEvent;
use AnyEvent::Handle;
use AnyEvent::DBI::MySQL;
use AnyEvent::Socket;
use Protocol::WebSocket::Handshake::Server;
use Protocol::WebSocket::Frame;
my $dbh = AnyEvent::DBI::MySQL->connect("DBI:mysql:chat:localhost", "admin", "admin",
{
mysql_enable_utf8 => 1,
PrintError => 0,
}) or die;
my $cv = AnyEvent->condvar;
my $hdl;
my $sth;
AnyEvent::Socket::tcp_server undef, 3000, sub {
my ($clsock, $host, $port) = #_;
my $hs = Protocol::WebSocket::Handshake::Server->new;
my $frame = Protocol::WebSocket::Frame->new;
$hdl = AnyEvent::Handle->new(fh => $clsock);
$hdl->on_read(
sub {
my $hdl = shift;
my $chunk = $hdl->{rbuf};
$hdl->{rbuf} = undef;
if (!$hs->is_done) {
$hs->parse($chunk);
if ($hs->is_done) {
$hdl->push_write($hs->to_string);
return;
}
}
$frame->append($chunk);
my $message = $frame->next;
if ($message eq ""){
$message = undef;
} else {
$sth = $dbh->do("INSERT INTO web_chat VALUES('$message')", { async => 0 });
}
my $ary_ref = $dbh->selectcol_arrayref("SELECT text FROM web_chat");
}
);
};
$cv->wait;
1;
Client is not written in Javascript
<!doctype html>
<form name="publish">
<input type="text" name="message" maxlength="50"/>
<input type="submit" value="Send"/>
</form>
<div id="messages"></div>
<script>
let socket = new WebSocket('ws://192.168.1.1:3000/websocket/');
// отправка сообщения из формы
document.forms.publish.onsubmit = function() {
let outgoingMessage = this.message.value;
socket.send(outgoingMessage);
return false;
};
socket.onopen = function () {
console.log("Websocket Connection");
};
socket.onerror = function () {
console.log("Error websocket connection ");
}
// прослушка входящих сообщений
socket.onmessage = function(event) {
let incomingMessage = event.data;
showMessage(incomingMessage);
};
socket.onclose = event => console.log(`Closed ${event.code}`);
// отображение информации в div#messages
function showMessage(message) {
let messageElem = document.createElement('div');
messageElem.textContent = message;
document.getElementById('messages').prepend(messageElem);
}
</script>

May I suggest Mojolicious and Mojo::Mysql for this?
Protocol::WebSocket is pretty “bare-bones” and doesn’t handle a lot of the protocol details like ping/pong.

Issues in turning a perl chat program to a web page

I have the below server and client codes in perl for chatting.
server code
#!C:\strawberry\perl\bin\perl.exe
use strict;
use warnings;
use IO::Socket::INET;
use IO::Select;
$| = 1;
my $serv = IO::Socket::INET->new(
LocalAddr => '0.0.0.0',
LocalPort => '5000',
Reuse => 1,
Listen => 1,
);
$serv or die "$!";
print 'server up...';
my $sel = IO::Select->new($serv); #initializing IO::Select with an IO::Handle / Socket
print "\nAwaiting Connections\n";
while(1){
if(my #ready = $sel->can_read(0)){ #polls the IO::Select object for IO::Handles / Sockets that can be read from
while(my $sock = shift(#ready)){
if($sock == $serv){
my $client = $sock->accept();
my $paddr = $client->peeraddr();
my $pport = $client->peerport();
print "New connection from $paddr on $pport";
$sel->add($client);
#for read/writability with can_read and can_write
}
else{
$sock->recv(my $data, 1024) or die "$!";
if($data){
for my $clients ($sel->can_write(0)){
if($clients == $serv){next}
print $clients $data;
}
}
}
}
}
}
#client code#
#!C:\strawberry\perl\bin\perl.exe
use CGI;
my $q = new CGI;
use strict;
use warnings;
use IO::Socket::INET;
use threads;
use IO::Select;
$| = 1;
my $sock = IO::Socket::INET->new("localhost:5000");
$sock or die "$!";
my $sel = IO::Select->new($sock);
print $q->header;
my $line = $q->param("login");
print $line;
print " <META http-equiv=\"refresh\" > ";
print "Connected to Socket ". $sock->peeraddr().":" . $sock->peerport() . "\n";
# content="URL=ipl7.pl"
#This creates a thread that will be used to take info from STDIN and send it out
#through the socket.
threads->create(
sub {
# while(1){
chomp($line);
for my $out (my #ready = $sel->can_write(0)){
print $out $line;
# }
}
}
);
# while(1){
if(my #ready = $sel->can_read(0)){
for my $sock(#ready){
$sock->recv(my $data, 1024) or die $!;
print "$data","\n" if $data;
# }
}
}
chat web page
<input type="text" id="txtSearch" onkeypress="searchKeyPress(event);" />
<input type="hidden" id="login" name="login" onclick="verifyLoginRequest();return true;" />
<div id="id_id"> </div>
<script type="text/javascript">
function searchKeyPress(e)
{
// look for window.event in case event isn't passed in
// if (typeof e == 'undefined' && window.event) { e = window.event; }
if (e.keyCode == 13)
{
document.getElementById('login').click();
document.getElementById('txtSearch').value="";
}
}
</script>
<script type="text/javascript">
function createRequestObject() {
var req;
if (window.XMLHttpRequest) { // Firefox, Safari, Opera...
req = new XMLHttpRequest();
} else if (window.ActiveXObject) { // Internet Explorer 5+
req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
// error creating the request object,
// (maybe an old browser is being used?)
alert('There was a problem creating the XMLHttpRequest object');
req = '';
}
return req;
}
// Make the XMLHttpRequest object
var http_login = createRequestObject();
function verifyLoginRequest() {
var login = document.getElementById("txtSearch").value;
if ( login ) {
var url = 'dd.pl?login='+login;
http_login.open('get', url );
http_login.onreadystatechange = handleLoginResponse;
http_login.send(null);
}
}
function handleLoginResponse() {
if(http_login.readyState == 4 && http_login.status == 200){
var response = http_login.responseText; // Text returned FROM perl script
if(response) { // UPDATE ajaxTest content
document.getElementById("id_id").innerHTML = response;
}
}
}
</script>
the following error is displayed
Perl exited with active threads:
\t1 running and unjoined
\t0 finished and unjoined,
\t0 running and detached
What is this error about and how to clear this error?

websocket server not receiving message

First I built a websocket server using node js and ws module. Then using chrome and firefox, I connect to that server and the connection is successfully established. However, the message I send from browsers does not arrive at the server. I have some code on server to console.log out if message is received. Nothing appears, however when I refresh the browser, the messages I previously sent arrive. The messages did not arrive when sent them but only once I refresh the page. I don't know why. This seems to work in from some other computers but not mine.
Here is the server code:
var WebSocketServer = require('ws').Server
, http = require('http')
, express = require('express')
, app = express();
app.use(express.static(__dirname + '/views'));
var rmi = require('./RMIClient.js');
console.log(rmi);
var server = http.createServer(app);
server.listen(8080);
var wss = new WebSocketServer({server: server});
// from here is the logic codes
var clients = [];
var clientId = 0;
wss.on('connection', function(ws) {
console.log("connection established for client "+ (clients.length+1));
clients.push(ws);
console.log("index is " + clients.indexOf(ws));
clientId += 1;
ws.send("Hello Client: " + clientId);
//
// ws.send("Welcome from AMTT Chatting Server");
ws.on('message',function(data){
console.log('message receieved : '+data);
for(var i = 0;i<clients.length;i++){
clients[i].send(data);
}
});
ws.on('a',function(){
console.log("a event fire from client");
});
ws.on('close', function() {
var index = clients.indexOf(ws);
console.log('stopping client interval '+index);
if (index > -1) {
clients.splice(index, 1);
}
});
});
Here is the client code:
<html>
<script>
//var ws = new WebSocket('ws://localhost:8080/');
var messagearea,inputarea,sendButton;
var connection = new WebSocket(/*'wss://echo.websocket.org');*/'ws://192.168.8.195:8080/');
// When the connection is open, send some data to the server
console.log(connection.readyState);
connection.onopen = function () {
console.log(connection.readyState);
inputarea.disabled = false;
sendButton.disabled = false;
};
// Log errors
connection.onerror = function (error) {
console.log('sorry connection fail:' + JSON.stringify(error));
};
// Log messages from the server
connection.onmessage = function (e) {
messagearea.value = messagearea.value + '\n' + e.data;
console.log('Server: ' + e.data);
};
function sendMessage(){
if(inputarea.value !='')
connection.send(inputarea.value);
inputarea.value = '';
}
</script>
<body>
<textarea rows="15" cols="100" id="messagearea" disabled>
</textarea>
<br/>
<textarea rows="2" cols="90" id="inputarea" required autofocus>
</textarea>
<input type = 'button' value = 'send' id = 'sendbutton' onclick = "sendMessage()"/>
</body>
<script>
messagearea = document.getElementById('messagearea');
messagearea.value = '';
inputarea = document.getElementById('inputarea');
inputarea.value = '';
inputarea.disabled = true;
sendButton = document.getElementById('sendbutton');
sendButton.disabled = true;
</script>
</html>
And again I found that kind of situation when I develop that code in java and deployed in wildfly server. I am lost. I think there is something concerned with my network card. Because that same code work perfectly in my friend's machine.
Does anybody experience this situation ? or any solution?

You can also try the following:
connection.addEventListener("message", function (e) {
processSocketMessage(e);
});
good luck :)

NodeJS app only returning the Socket.io welcome message

I have a tracking app built with Node that is accessed by other sites in our network. They will access the app thru the head of their html files like so:
<title>Test</title>
<meta name="generator" content="TextMate http://macromates.com/">
<script src="http://mynetwork.com:1337/tracker.js?pid=publisher1&ps=home"></script>
</head>
<body>
The tracker.js file uses socket.io to connect to app.js which stores some data in MongoDB. For some reason when start socket.io then load a page that references that Tracker.js scripts I get an error "Uncaught SyntaxError: Unexpected identifier" on line 1 which is actually the “Welcome to socket.io." message and not the javascript thats in the file.
Here is what Tracker.js looks like:
(function(document, onload){
var io = document.createElement('script');
io.src = "//cdn.socket.io/stable/socket.io.js";
io.setAttribute('async', 'true');
if ( typeof onload === 'function') {
io.onloadDone = false;
io.onload = function() {
io.onloadDone = true;
onload();
};
io.onreadystatechange = function() {
if ( "loaded" === io.readyState && !io.onloadDone ) {
io.onloadDone = true;
io.onload();
}
};
}
(document.getElementsByTagName('head') || document.getElementsByTagName('body'))[0].appendChild(io);
});
(document, function(){
var socket = io.connect('http://mynetwork.com:1337');
socket.emit('adTracker',
{ adServer: 'datalunk', adZone : 'top_home', referingURL : 'site.com' }
);
socket.on('entrance', function(){
console.log('Response is:' + data.message);
});
});
The app.js file looks like this:
var io = require('socket.io');
var tracker = io.listen(1337);
tracker.configure(function () {
tracker.set('authorization', function (handshakeData, callback) {
if (handshakeData.xdomain) {
callback('Cross-domain connections are not allowed');
} else {
callback(null, true);
}
});
});
tracker.sockets.on('connection', function (socket) {
socket.on('entrance', {message: 'connection has been made to app.js'});
socket.on('adTracker', function (data) {
var adRequestData = data;
var pass = ["bigbooks"];
var databaseUrl = "user:pass#linus.mongohq.com:10006/node-test";
var collections = ["mads"]
var db = require("mongojs").connect(databaseUrl, collections);
db.cmnads.insert({adRequest : adRequestData}, {$set: {password: pass}}, function(err, updated) {
if( err || !updated ) console.log("User not updated");
else console.log("User updated");
});
});
});
Can anyone tell me why I would be getting the socket.io welcome message & error on line 1 and how do I resolve it?

(function(document, onload){
var io = document.createElement('script');
// rest of code
});
(document, function(){
// rest of code
});
});
should be
(function(document, onload){
var io = document.createElement('script');
// rest of code
})(document, function(){
// rest of code
});
});
You use an anonymous function that you should call (and you don't do it).
the correct syntax is (for a more simple example):
(function(a) {console.log(a)})('Hello World');
However you do:
(function(a) {console.log(a)});
('Hello World');

Make sure that the server has the latest stable version of Node installed. According to the official web site, it is currently v0.8.16.
Also, if socket.io server is running on http://mynetwork.com:1337/ then I believe you should be able to include the socket.io.js from http://mynetwork.com:1337/socket.io/socket.io.js
The fastest way to check if maybe the Node version is the source of problem is to install Node Version Manager, then v0.8.16 and finally run the socket.io server again
wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh
nvm install v0.8.16
nvm use 0.8.16
node yourSocketIOserver.js