Develop Reference

When an event is cast after a user sends a message, echo is not listening to it

I'm using JavaScript, Ajax, and Laravel.
im trying to make 1 on 1 private messages between users
I tried using broadcastAs and putting it in the listen on privatemessagejs but pusher doesn't seem to listen to the event that casts after the user sends a message.
privateMessage.js
let token = $('meta[name="csrf-token"]').attr('content');
//form-id
let form = document.getElementById('form');
//input-message
let inputMessage = document.getElementById('input-message');
//container-message
let container = document.getElementById('container-message');
//room-id
let roomid = document.getElementById('room-id');
const roomId = roomid.value;
//other-user-id
let touserId =document.getElementById('touserId');
const toUserId = touserId.value;
let send = document.getElementById('send-btn');
let typing = document.getElementById('typing');
let status = document.getElementById('status');
let read_message = document.querySelectorAll('.fa-check-double.unreaded');
//array of online users in both sides
let usersOnline = [];
//create new channel and make pass room id to it
const channel = Echo.private(`message.${toUserId}`);
channel.listen('App\\Events\\Chats\\SendMessage',(e) => {
console.log('hello');
create_message(e);
});
//add status code 1 => online , 0 => offline
function add_status_code()
{
let status_code = 0
usersOnline.forEach(user => {
if(user.id == toUserId){
status_code = 1
}
});
return status_code
}
//check message status in front view
function check_message_status(message)
{
let status_t = 'unreaded'
if(message.status == 1){
status_t = 'readed'
}
return status_t
}
//create message
function create_message(message)
{
let status_t = check_message_status(message)
console.log(status_t)
console.log('aaamk');
var today = new Date();
var time = today.toLocaleTimeString();
if(message.id == '{{Auth::id()}}'){
container.innerHTML +=`
<div class="message text-only">
<div class="response">
<p class="text">${message.message}</p>
</div>
</div>
<p class="time my_time">${time} <i class="fa-sharp fa-solid fa-check-double ${status_t}"></i></p>
`
}else{
var today = new Date();
var time = today.toLocaleTimeString();
container.innerHTML +=`
<div class="message">
<div class="photo" style="background-image: url(https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80);">
<div class="online"></div>
</div>
<p class="text"> ${message.message} </p>
</div>
<p class="time">${time}</p>
`;
}
}
//read message in typing
function read_all_message()
{
usersOnline.forEach(user => {
if(user.id == toUserId){
let readedd = document.querySelectorAll('.fa-check-double.unreaded');
readedd.forEach(el=>{
el.className = 'fa-sharp fa-solid fa-check-double readed';
})
$.ajax({
method: "POST",
url: "/read_all",
data: {
toId: toUserId,
roomId: roomId,
_token: token
},
});
}
});
}
//show in typing
// inputMessage.addEventListener('input',function(event){
// if(inputMessage.value.length == 0){
// channel.whisper('stop-typing');
// }else{
// channel.whisper('typing',{
// name: "{{$user->display_name}}"
// })
// console.log('typingsss');
// }
// })
//on submit
form.addEventListener('submit',function(event){
const userInput = inputMessage.value;
event.preventDefault();
let status_code = add_status_code()
$.ajax({
method: "POST",
url: "/send",
data: {
message: userInput,
roomid:roomId,
touserId:toUserId,
status:status_code,
_token: token
},
});
// channel.whisper('stop-typing');
inputMessage.value="";
})
SendMessage event
<?php
namespace App\Events;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;
class SendMessage
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $message;
public $user;
public $roomId;
public $fromId;
public $status;
/**
* Create a new event instance.
*
* #return void
*/
public function __construct($message,$user,$roomId,$fromId,$status)
{
$this->message = $message;
$this->user = $user;
$this->roomId = $roomId;
$this->fromId = $fromId;
$this->status = $status;
}
/**
* Get the channels the event should broadcast on.
*
* #return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
return new PrivateChannel('message.'.$this->roomId);
}
public function broadcastWith()
{
return [
'id'=>$this->fromId,
'name'=>$this->user,
'message'=>$this->message,
'status'=>$this->status,
];
}
}
Channels.php
<?php
use Illuminate\Support\Facades\Broadcast;
/*
|--------------------------------------------------------------------------
| Broadcast Channels
|--------------------------------------------------------------------------
|
| Here you may register all of the event broadcasting channels that your
| application supports. The given channel authorization callbacks are
| used to check if an authenticated user can listen to the channel.
|
*/
Broadcast::channel('App.Models.User.{user_id}', function ($user, $id) {
return (int) $user->user_id === (int) $id;
});
Broadcast::channel('message.{id}', function ($user, $id) {
return $user;
});
bootstrap.js
import _ from 'lodash';
window._ = _;
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
import axios from 'axios';
window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
import Echo from 'laravel-echo';
import Pusher from 'pusher-js';
window.Pusher = Pusher;
Pusher.logToConsole = true;
window.Echo = new Echo({
broadcaster: 'pusher',
key: import.meta.env.VITE_PUSHER_APP_KEY,
cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'ap1',
wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
wsPort: import.meta.env.VITE_PUSHER_PORT ?? 6001,
wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
// forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'http') === 'http',
enabledTransports: ['ws', 'wss'],
});
SendMessage Controller
<?php
namespace App\Http\Controllers;
use App\Models\Chat;
use App\Models\User;
use App\Models\Message;
use App\Events\SendMessage;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
class SendMessageController extends Controller
{
public function sendMessage(Request $request){
$fromId = Auth::id();
$toUserId = $request->touserId;
$message = $request->message;
$status = $request->status;
$email = Auth::user()->email;
$user = Auth::user()->display_name;
$id = $request->roomid;
$save_message = Message::create([
'message'=>$message,
'from_id'=>$fromId,
'to_id'=>$toUserId,
'chat_id'=>$id,
'is_readed'=>$status,
]);
event(new SendMessage($message,$user,$id,$fromId,$status,));
}
//show room by user
public function show_room($id){
//update auth user status to be online
$update = User::find(Auth::id())->update([
'is_online'=>1
]);
$user = User::findOrfail($id);
//select room if there exist , if not create new one
$room = Chat::where([
['user_1',Auth::id()],
['user_2',$id]
])->orWhere([
['user_1',$id],
['user_2',Auth::id()]
])->first();
if($room == null){
$room = Chat::create([
'user_1'=>Auth::id(),
'user_2'=>$id
]);
}
// dd();
return view('users.chats',[
'user'=>$user,
'room_id'=>$room->chat_id,
'messages'=>Message::oldest()->where('chat_id',$room->chat_id)->get()
// $room->messages()
]);
}
//update message status to => is_readed
public function read_all_messages(Request $request){
$to_id = $request->toId;
$room_id = $request->roomId;
$update = Message::where([
['chat_id',$room_id],
['from_id',Auth::id()],
['to_id',$to_id],
['is_readed',0],
])->update([
'is_readed'=>1
]);
return null;
}
}

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.

websocket php server wss error

I have this code on http://example.com/push8/index.html
index.html
<script src="websocket.js"></script>
<script>
var Server;
function log(text) {
$log = $('#log');
//Add text to log
$log.append(($log.val()?"\n":'')+text);
//Autoscroll
$log[0].scrollTop = $log[0].scrollHeight - $log[0].clientHeight;
}
function send(text) {
Server.send('message', text);
}
$(document).ready(function() {
log('Conectando...');
Server = new FancyWebSocket('wss://myip:port'); //or ws if I use HTTP
$('#message').keypress(function(e) {
if ( e.keyCode == 13 && this.value ) {
log( 'You: ' + this.value );
send( this.value );
$(this).val('');
}
});
//Let the user know we're connected
Server.bind('open', function(){
log( "Conectado." );
});
//OH NOES! Disconnection occurred.
Server.bind('close', function(data){
log( "Desconectado." );
});
//Log any messages sent from server
Server.bind('message', function(payload){
log( payload );
});
Server.connect();
});
</script>
websocket.js
var WebSocket = function(url)
{
var callbacks = {};
var ws_url = url;
var conn;
this.bind = function(event_name, callback){
callbacks[event_name] = callbacks[event_name] || [];
callbacks[event_name].push(callback);
return this;// chainable
};
this.send = function(event_name, event_data){
this.conn.send( event_data );
return this;
};
this.connect = function() {
if ( typeof(MozWebSocket) == 'function' )
this.conn = new MozWebSocket(url);
else
this.conn = new WebSocket(url);
// dispatch to the right handlers
this.conn.onmessage = function(evt){
dispatch('message', evt.data);
};
this.conn.onclose = function(){dispatch('close',null)}
this.conn.onopen = function(){dispatch('open',null)}
};
this.disconnect = function() {
this.conn.close();
};
var dispatch = function(event_name, message){
var chain = callbacks[event_name];
if(typeof chain == 'undefined') return; // no callbacks for this event
for(var i = 0; i < chain.length; i++){
chain[i]( message )
}
}
};
and the server.php
<?php
// prevent the server from timing out
set_time_limit(0);
// include the web sockets server script (the server is started at the far bottom of this file)
require 'class.PHPWebSocket.php';
// when a client sends data to the server
function wsOnMessage($clientID, $message, $messageLength, $binary) {
global $Server;
$ip = long2ip( $Server->wsClients[$clientID][6] );
if ($messageLength == 0){/*check if message length is 0*/
$Server->wsClose($clientID);
return;}
foreach ($Server->wsClients as $id => $client){
if ($id != $clientID){$Server->wsSend($id, "Visita $clientID($ip): \"$message\" (tu id es: $id)");}}
}
// when a client connects
function wsOnOpen($clientID){
global $Server;
$ip=long2ip($Server->wsClients[$clientID][6]);
$Server->log( "$ip ($clientID) se ha conectado." );
}
// when a client closes or lost connection
function wsOnClose($clientID, $status) {
global $Server;
$ip=long2ip($Server->wsClients[$clientID][6]);
$Server->log("$ip ($clientID) se ha desconectado.");
}
// start the server
$Server = new PHPWebSocket();
$Server->bind('message', 'wsOnMessage');
$Server->bind('open', 'wsOnOpen');
$Server->bind('close', 'wsOnClose');
$Server->wsStartServer('myip', 'port');
?>
This code works perfectly when I use a HTTP connection but when I use the HTTPS doesn't work. The error is:
WebSocket connection to 'wss://myip:port/' failed: Error in connection establishment: net::ERR_CONNECTION_CLOSED
I tried different ways like:
on apache config, I added ProxyPass "/push8" "ws://localhost:port"
I installed engintron and I added the same.
It didn't work...
Note: I use the default Cpanel config and Centos.

I don't know if you've solved this yet. But for anyone looking for a solution, this is what I had to do. I'm running Apache2 on Debian, PHP 7.
Make sure that the php proxy_wstunnel_module is installed.
In the file proxy_wstunnel.load inside the /etc/apache2/mods-available folder. Add the line you added to the php.ini file. For me it did not work adding it to the php.ini file.
ProxyPass "/push8" "ws://localhost:port/"
service php7.0-fpm stop
service php7.0-fpm start
Restart Apache and your websocket should connect.

AJAX and MYSQL, AJAX too fast for mysql to query?

I am working on a php/mysql application, I am trying to collect javascript errors to the database using window.onerror, where inside that function I make an ajax request to a php script that will log the errors into the database. However, when I tested it there are supposed to be 13 errors logged, but only one get inserted into the database. All the 13 ajax requests return 200 OK, is this happening because ajax is just simply too fast for the mysql query to process anything. I tried using set timeout on the send request but it doesnt seem to work.
Here is my code:
window.onerror = function(msg, url, line)
{
function createXHR()
{
try { return new XMLHttpRequest(); } catch(e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch (e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch (e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
return null;
}
function sendRequest(url, payload)
{
var xhr = createXHR();
if (xhr)
{
xhr.open("POST",url,true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
};
xhr.send(payload);
}
}
function encodeValue(val)
{
var encodedVal;
if (!encodeURIComponent)
{
encodedVal = escape(val);
/* fix the omissions */
encodedVal = encodedVal.replace(/#/g, '%40');
encodedVal = encodedVal.replace(/\//g, '%2F');
encodedVal = encodedVal.replace(/\+/g, '%2B');
}
else
{
encodedVal = encodeURIComponent(val);
/* fix the omissions */
encodedVal = encodedVal.replace(/~/g, '%7E');
encodedVal = encodedVal.replace(/!/g, '%21');
encodedVal = encodedVal.replace(/\(/g, '%28');
encodedVal = encodedVal.replace(/\)/g, '%29');
encodedVal = encodedVal.replace(/'/g, '%27');
}
/* clean up the spaces and return */
return encodedVal.replace(/\%20/g,'+');
}
if (window.XMLHttpRequest) {
var master = "llesmana#ucsd.edu";
var payload = "msg=" + encodeValue(msg) + '&url=' + encodeValue(url) + "&line=" + encodeValue(line) + "&master=" + encodeValue(master);
var url_req = "http://104.131.199.129:83/php/log_error.php";
sendRequest(url_req, payload);
return true;
}
return false;
}
PHP:
<?php
/**
* Created by PhpStorm.
* User: xxvii27
* Date: 9/2/14
* Time: 12:30 PM
*/
/* Helper functions */
function gpc($name)
{
if (isset($_GET[$name]))
return $_GET[$name];
else if (isset($_POST[$name]))
return $_POST[$name];
else if (isset($_COOKIE[$name]))
return $_COOKIE[$name];
else
return "";
}
//Database Connection
function connectDB (){
define('DB_HOST', 'localhost');
define('DB_NAME', 'userinfo');
define('DB_USER','root');
define('DB_PASSWORD','ohanajumba');
$con=mysqli_connect(DB_HOST,DB_USER,DB_PASSWORD, DB_NAME) or die("Failed to connect to MySQL: " . mysql_error() );
return $con;
}
function logError($occured, $name, $line, $master, $url, $db){
$command="INSERT INTO errors (id, occured, name, url, line, master) VALUES (NULL, '$occured', '$name', '$url','$line', '$master')";
mysqli_query($db, $command) or die(mysql_error());
}
$db = connectDB();
$message = htmlentities(substr(urldecode(gpc("msg")),0,1024));
$url = htmlentities(substr(urldecode(gpc("url")),0,1024));
$line = htmlentities(substr(urldecode(gpc("line")),0,1024));
$master = htmlentities(substr(urldecode(gpc("master")),0,1024));
$date = date('Y-m-d G:i:s', time());
logError($date, $message, $line, $master, $url, $db);
mysqli_close($db);
Also, I have checked all the sent data through the request and all of them have been received properly by the script, any help would be appreciated.

I solved it , apparently I forgot to use mysqli_real_escape_string().

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?