Bonjour à tous,
Je m'adresse à vous en raison d'une difficulté que je rencontre. J'ai application symfony dans laquelle j'ai implémenté un système de chat temps réel avec Ratchet, tout fonctionne bien en local. J'ai deplayé mon application sur Infomaniak, mais j'arrive pas à démarrer les websocket pour le système de chat. J'ai baladé en lecture le sujet sur le web et la documentation de Ratchet, mais je trouve rien (je note que c'est ma première fois de faire un truc parail).
// Mon fichier chat.js
import '../css/chat.scss';
import $ from 'jquery';
import 'parsleyjs';
import 'jquery-validation';
//import {format} from "timeago.js";
$(document).ready(function () {
const $messageList = $('.js-message-list');
if ($messageList[0]) {
let messageList = new MessageList($('.js-message-list'));
initializeMessageList(messageList);
}
});
class MessageList
{
constructor($element) {
this.$element = $element;
this.messages = [];
this.render();
$.ajax({
url: this.$element.data('url')
}).then(data => {
this.messages = data;
this.render();
})
}
render() {
const itemsHtml = this.messages.map(message => {
return `
<div class="${message.mine ? 'outgoing_msg' : 'incoming_msg'}">
<div class="${message.mine ? 'sent_msg' : 'received_withd_msg'}">
<small>${message.member.username}</small>
<p>${message.content}</p>
<small class="js-time-ago">${new Date(message.createdAt).toLocaleString()}</small>
</div>
</div>`
});
this.$element.html(itemsHtml.join(''));
goToBottom()
}
}
function initializeMessageList(messageList) {
const socket = new WebSocket("ws://localhost:8001");
const form = $(".js-message-form");
const memberName = $(".js-fetch-message").data('member');
const sendMessage = (message) => {
if (message === '') {
return;
}
fetch(form.attr('action'), {
method: form.attr('method'),
body: 'message=' + message,
headers: new Headers({
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
})
}).then(() => {
let data = {
username: memberName,
message: message
};
socket.send(JSON.stringify(data));
});
};
form.on('submit', function (event) {
event.preventDefault();
let message = $(".js-message-input").val();
sendMessage(message);
});
socket.addEventListener("open", function(e) {
console.log("Connected to chat server!");
});
socket.addEventListener("message", function(e) {
console.log(e.data);
try {
const data = JSON.parse(e.data);
console.log(data.from, data.message, data.dt);
addMessage(data.from, data.message, data.dt);
goToBottom();
}
catch(e) {
// Catch any errors
}
});
}
function addMessage(name, message, date) {
$(".js-message-list").append(`
<div class="${name === 'me' ? 'outgoing_msg' : 'incoming_msg'}">
<div class="${name === 'me' ? 'sent_msg' : 'received_withd_msg'}">
<small>${name}</small>
<p>${message}</p>
<small class="js-time-ago">${date}</small>
</div>
</div>`
);
$(".js-message-input").val("");
}
function goToBottom(){
const element = document.getElementById('mercure-content-receiver');
element.scrollTop = element.scrollHeight;
}
// Mon fichier de Commande console
<?php
namespace App\Command;
use App\SocketHandler\WebSocketHandler;
use Ratchet\Http\HttpServer;
use Ratchet\Server\IoServer;
use Ratchet\WebSocket\WsServer;
use Symfony\Component\Console\Command\Command;
use Symfony\Component\Console\Input\InputInterface;
use Symfony\Component\Console\Output\OutputInterface;
class WebSocketServerCommand extends Command
{
protected static $defaultName = "run:websocket-server";
protected function execute(InputInterface $input, OutputInterface $output)
{
$port = 8001;
$output->writeln("Starting socket server on port " . $port);
$server = IoServer::factory(
new HttpServer(
new WsServer(
new WebSocketHandler()
)
),
$port
);
$server->run();
return 0;
}
}
Ce que je veux
Je veux démarrer les websocket sur Infomaniak
Ce que j'obtiens
Aucune réponse