I am trying to set up event broadcasting with Laravel 5.4 + Redis + Sockets + Echo but I'm running into a problem. I've run:
npm install --save laravel-echo
I've put the following at the bottom of my resources/assets/js/bootstrap.js file:
import Echo from "laravel-echo"
window.Echo = new Echo({
broadcaster: 'socket.io',
host: window.location.hostname + ':6001'
});
I've then run the following to compile everything:
npm run dev
I am including the compiled app.js file in the head and trying to listen like so :
<!DOCTYPE html>
<html lang=en>
<head>
<meta name="csrf-token" content="epkZXByjsW4lU6wwD2mELWe60Q26m3642lvMCoLK">
<script src="http://localhost:3000/js/app.js"></script>
</head>
<body>
<h1>Chat</h1>
<script src="//localhost:6001/socket.io/socket.io.js"></script>
<script type="text/javascript">
Echo.private('chat')
.listen('MessageSentEvent', (e) => {
console.log(e.update);
});
</script>
</body>
</html>
In the console I get the following two errors:
Uncaught TypeError: Cannot read property 'csrfToken' of undefined
at Object.<anonymous> (bootstrap.js:24)
at __webpack_require__ (bootstrap 2b5c37a…:19)
at Object.<anonymous> (app.js:8)
at __webpack_require__ (bootstrap 2b5c37a…:19)
at Object.<anonymous> (module.js:22)
at __webpack_require__ (bootstrap 2b5c37a…:19)
at bootstrap 2b5c37a…:65
at bootstrap 2b5c37a…:65
(anonymous) # bootstrap.js:24
__webpack_require__ # bootstrap 2b5c37a…:19
(anonymous) # app.js:8
__webpack_require__ # bootstrap 2b5c37a…:19
(anonymous) # module.js:22
__webpack_require__ # bootstrap 2b5c37a…:19
(anonymous) # bootstrap 2b5c37a…:65
(anonymous) # bootstrap 2b5c37a…:65
chat:36 Uncaught ReferenceError: Echo is not defined
at chat:36
What am I doing wrong?
I think it's because you defined window.Echo, not Echo.
To access it, do this instead:
window.Echo.channel()....
At chat line 36 change this:
Echo.private('chat')
.listen('MessageSentEvent', (e) => {
console.log(e.update);
});
To this:
window.Echo.private('chat')
.listen('MessageSentEvent', (e) => {
console.log(e.update);
});
Hope this fixes your problem!
You didn't mention that upon which event you are getting that error on console.
These may help:
https://github.com/tlaverdure/laravel-echo-server/issues/68
https://github.com/laravel/echo/issues/65
It looks like you are trying to create a chat application. I recently built such chat app using Laravel 5.4 + Redis + Sockets + Echo:
https://github.com/xparthx/laravel-realtime-chat
It will help you to build your own once you check that.
Thanks
Related
i'm trying to use this lib from AdminLTE in a Vue project. I would like to know if it's possible.
AdminLTE Doc
Screen Cap
I've installed adminlte by npm, and already have jquery too
I have a app.js file with my Vue const App, and my components.
This is my code in my App.js file
import 'admin-lte/plugins/toastr/toastr.min.js'
import 'admin-lte/plugins/toastr/toastr.min.css'
$(document).Toasts('create', {
icon: 'fas fa-exclamation-triangle',
class: 'bg-danger m-1',
autohide: true,
delay: 5000,
title: 'An error has occured',
body: 'Something went wrong'
})
But I get this error message in console
app.js:6776 Uncaught TypeError: $(...).Toasts is not a function
at Module../resources/js/app.js (app.js:6776:13)
at __webpack_require__ (app.js:221424:42)
at app.js:221593:64
at Function.__webpack_require__.O (app.js:221468:24)
at app.js:221595:53
at app.js:221597:12
Honestly I don't have idea how to start, I hope you can help me, thanks
I'm having a go with speech for a BOT. I have been running through the Microsoft Tutorial found here. I've taken the example Echo BOT example from there, found here, as a basis so I can use it as a basis going forward. This has been successfully deployed to my Azure environment. Also in the tutorial, you run your Bot through the Direct Line Speech Client v1, everything works as expected when doing this.
I have looked at the Bot Framework Web Chat speech notes to get the Bot working using this as my channel. Here is my code for this:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Web Chat: Browser-supported speech</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<style>
html, body { height: 100% }
body { margin: 0 }
#webchat {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="webchat" role="main"></div>
<script>
(async function () {
window.WebChat.renderWebChat({
directLine: createDirectLine({
secret: '<My Direct Line secret>'
}),
language: 'en-US',
webSpeechPonyfillFactory: await createCognitiveServicesSpeechServicesPonyfillFactory({
region: '<Speech cognitive service region>',
subscriptionKey: '<Speech cognitive service key>'
})
}, document.getElementById('webchat'));
document.querySelector('#webchat > *').focus();
})().catch(err => console.error(err));
</script>
</body>
</html>
I'm able to get this working and I can do speech to text and text inputs and the contents is written back, but when it tries to do text to speech back I'm getting the following errors in the browser console:
POST https://<region>.tts.speech.microsoft.com/cognitiveservices/v1 net::ERR_ABORTED 400 (Speak node can only be the root.)
webchat.js:1 Error: Failed to syntheis speech, server returned 400
at webchat.js:1
at c (webchat.js:1)
at Generator._invoke (webchat.js:1)
at Generator.e.<computed> [as next] (webchat.js:1)
at n (webchat.js:1)
at s (webchat.js:1)
I'm not quite sure if it is something in the script code or the Bot, let me know if you need any more detail. Thanks in advance!
It is weird... I hosted a echo bot on Azure and just copy and paste your html code and did some config ,I tested on edge firefox and chrome but everything works well including tts calling :
You can try it here and check the config . Hope it helps .
how to properly connect third-party plug-ins when developing on laravel?
I need the fullpage.js library
downloaded it via npm
in the resources/js/bootstrap.js file I added require ('fullpage.js');
In the resources/js/app.js file I added
$ (document) .ready (function () {
$ ('. js-fullpage'). fullpage ({});
});
I launch the project and I see in the console
app.js: 4655 jQuery.Deferred exception: $ (...). fullpage is not a function TypeError: $ (...). fullpage is not a function
at HTMLDocument. <anonymous> (http: // localhost: 3000 / js / app.js: 770: 21)
at mightThrow (http: // localhost: 3000 / js / app.js: 4371: 29)
at process (http: // localhost: 3000 / js / app.js: 4439: 12) undefined
app.js: 770 Uncaught TypeError: $ (...). fullpage is not a function
as if it does not see the connection it's a library ..
and generally my call code from resources/js/app.js is why you are ABOVE than resources/js/bootstrap.js, although they are connected in a different order
my bootstrap file
try {
window.$ = window.jQuery = require('jquery');
} catch (e) {
}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found:https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
require('fullpage.js');
Can you try to include it like
require('fullpage')
or you can try to pass full path
Add it to your webpack.mix.js and run npm run dev or npm run prod depending on your environment:
mix.js([
'resources/assets/js/app.js',
'path/to/fullpage.js',
], 'public/js/app.js')
code from index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<!-- All of the Node.js APIs are available in this renderer process. -->
We are using Node.js <script>document.write(process.versions.node)</script>,
Chromium <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
<script src="./renderer.js"></script>
</body>
<form><input></form><div></div>
</html>
code in renderer.js:
var io = require('socket.io')();
var os = require('os');
var fs = require('fs');
io.listen(6000);
io.on('connection', function (socket) {
socket.on('my socketId', function (data) {
socket.emit('client connect', {
nickname: os.hostname()
});
});
});
Problem: It works fine using electron . running in browser. But client got no respond after packaging by electron-packager.
Thank you very much for any help!!
I finally solved this problem. I was copying the app to build first. But node_modules (and those packages) didn't exist in that directory. Either copy it or run npm install in build before running Electron Packager will make it work.
I'm trying to setup Laravel Echo with pusher, to implement real time notifications.
First, i have installed Laravel Echo and Pusher:
npm install --save laravel-echo pusher-js
After this, in bootstrap.js i have uncomment the code (as guide say):
import Echo from "laravel-echo"
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'my_key',
encrypted: true
});
Echo.channel('orders')
.listen('TestEvent', (e) => {
console.log('pippo');
});
I have run gulp and now when i visit the page, i get this error:
bootstrap.js?5e63:50 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_laravel_echo___default.a.channel is not a function
Changing Echo.channel('orders') to window.Echo.channel('orders') should fix that.