<router-view #loggedIn="changed"></router-view>
Hi , I just need to know what is #loggedIn in this context of vue js. I can't seem to find this syntax in the documentation. Is this a custom event of loggedIn which calls the changed method?
# is a shorthand for v-on. See here https://v2.vuejs.org/v2/guide/syntax.html#v-on-Shorthand
In your markup it means that you listen to event loggedIn emited from router-view and use method changed as handler of event
Related
I use <router-view> to inject components based on the route. I want to make vue-assertions in Laravel Dusk now.
<router-view :key="$route.fullPath" :dusk="$route.name"></router-view>
But when I do ->assertVue('field', 'value', '#indexOrder') on my order index route, I get this error:
Facebook\WebDriver\Exception\UnexpectedJavascriptException: javascript error: Cannot read property '__vue__' of null
Of course, I made sure that the route's name is indexOrder and is correctly put in the dusk-attribute of the router-view component. How can I fix that?
While this is not exactly an answer, it can help move you in the right direction.
When you run the following command in your browser console on the route you're testing, you'll see a $children variable.
document.querySelector('body [dusk="YOUR_ROUTE_NAME"]').__vue__;
The above command is what Dusk executes in its MakesAssertions trait under the vueAttribute method. This $children variable holds all of your components loaded by the router, so you'll have to create some new methods and assertions to support vue-router in Dusk.
In Vaadin 14, while looking at the Login component, specifically the source code for AbstractLogin.java, I noticed:
An "action" can be saved on a login widget via getElement.setProperty.
The Javadoc for AbstractLogin::setAction says: “Once action is defined a {#link AbstractLogin.LoginEvent} is not fired anymore.”
I understand making an object of mine a listener for LoginEvent by registering with the login widget via AbstractLogin::addLoginListener.
But this “action” seems to be an alternative way to work instead of event listeners.
Can someone tell me more about actions and how they work in Vaadin Flow?
I searched the Vaadin Docs for the word action but found nothing there.
The HTML API of the LoginForm specifies the following
action: string | null | undefined= null notify
If set, a synchronous POST call will be fired to the path defined. The
login event is also dispatched, so event.preventDefault() can be
called to prevent the POST call.
I understand that, with this option you can configure the login form to post the data login processing or e.g. to external authentication service. Useful use case is to set it "login" when using Vaadin with Spring security. This case is shown in Bakery App Starter.
Alright so I have been trying to set up a spreadsheet application with concurrent editing. I went down the laravel echo, redis, sockets route. (Any advice to just use pusher will be summarily dismissed). Now for the most part I have this working and I can call my event from tinker and see the data I want flow through redis to sockets and get picked up by my frontend. However the call simply does not work when placed in a controller; its like its just being ignored. For simplicity sake I removed all code from the controller function except for event(new SalesPricingReportEdit($request)); I can use this exact code in tinker storing the exact source of the request from dev tools {"change":[[0,"future contract price",null,750]],"customer_id":101443,"item_id":"MOFT0602-1-550"} and my ws responds on multiple instances of the page across different computers with the data attached to the WS. I can post any code anyone needs to help just let me know what you want to see.
EDIT(resolved): Alright so now that I am mostly finished with this project I have my write up I figured Id post it for posterity this is a process guide that lead me to successfully using laravel events with redis and socket-io via echo.
Register your new Event in laravel go to app/Providers/EventServiceProvider.php and put in the fully namespaced path for your Event that doesnt exist yet. Using the default namespace will save you a headache in implemntation but you can use a non-default
if you wish to gouge your own eyes out while you attempt to route the events on your frontend.
protected $listen = [ 'App\Events\EventName.php' => [
//you would put a handler here but for my case i was only dealing with an
//Event generated by server and handled by the client(browser)
//so it wasn't needed. KISS
],
Once you save that you just use the artisan generate event command and it will read the listener array and scaffold you up an event.
note: While we are in the providers folder lets just note the broadcastServiceProvider and its reference to the routes/channel file this isn't very important for me now but its good to remember
In your app/Events/EventName.php we will be configuring our event. Most of this is standard but there will be a few gotchas I dont want to forget about.
your class should by default implement ShouldBroadcast ... I changed this to shouldBroadcastNow as well as setting my default QUE_DRIVER=sync in global .env and config to sync .. this just avoids an extra overhead of queing the jobs..probably dumb in the long term but, for now queing is a bit overkill.
continue in app/Events/EventName.php
Next notice your construct function. To pass data through an event you need to declare a public variable in the class and set the value for that inside your constructor. By Default laravel will/should/suppposed to pass any public variable in the
class with the event.
public $change;
public function __construct($request){
$this->change = json_decode($request, true);
}
Next in your broadcastOn() function you want to return a new channel...essencially
return new [Type]Channel([channel-name]);
make sure you have all the facades you need in your header.
the broadcastWith() function will let you manipulate the data sent with the event.
I did not use the broadcastAs() function but, it is supposed to allow you to change the Event Name rather than using the default class name.
Now we are going to go to our controller file where we plan to actually fire the event from app/Http/Controllers/xxxxxxxxxController.php
use the syntax
event(new EventName($data))
when you want the event to get kicked off. this will not work as we have not set up redis or sockets but to test this is all in working order go to your .env and change the BROADCAST_DRIVER=log. once done wipe cache and do whatever it is you need to do to get the controller function to run(either by using tinker or by a frontend path you plan on using with the event). you should then be able to see the storage/app/logs/laravel.log contain the information from your event.
Go ahead and install redis on your server and use basic laravel configuration in .env and in config/database.php the only thing to change is to add in the .env BROADCAST_DRIVER=redis.
To avoid some complications go ahead and make sure your CACHE_DRIVER to file.
I have not yet set up multi connections with redis to let redis work both as broadcast and cache; ik its possible but I havent done it. so for now cache_driver can go away.
Also I tried to set this up using PHPredis but I admitted defeat and just used predis. Anyone that can figure this out I will venmo 50 bucks.
Finally to test that you have done this correctly go into
redis-cli > PING ...resp: PONG
Also you can use redis-cli monitor to verify that event data is indeed being pushed to redis.
Now we will start setup with npm we are going install laravel-echo-server, I will also get the pm2 package to act as my daemonizer for echo server.bash it up with
` #!/var/www/repoting/ bash
laravel-echo-server start`
then just run pm2 start socket.sh
when testing you might want to run laravel-echo-server start straight from the cli because the output stream will let you know when it observed an event broadcast in redis.
we will also need the
npm --save socket.io-client
or websockets don't work.
Lets go to resources/assets/js/bootstrap.js
import Echo from "laravel-echo";
window.io = require('socket.io-client');
if (typeof io !== 'undefined') {
window.Echo = new Echo({
broadcaster: 'socket.io',
host: window.location.hostname + ':6001',
});
}
This is initializing our websocket connection.
Now in our blade file we are going to subscribe to the channel and listen for events. Make sure to include the :6001/socket.io/socket.io.js file or your callbacks will fail
Why are we not doing this in the bootstrap.js you ask? because part of the channel name I am using is being passed by the controller with the view so to subscribe to the right channel I need something like
channel-name-{{$customer_id}}.
What you say I should have properly set up vue and done things the way they were designed to be done in vue....go home your drunk.
So now in resources/views/xxxxx.blade.php
I am using this in conjunction with handsontables so I am going to insert my listener in the afterRender hook.
Echo.channel('EventName-{{$customer_id}}')
.listen('EventName',function(data){
console.log(data);
});
any confusion here about what goes in the channel vs what goes in the listen clause can think of it as using the channelName and then the eventName by default the class name. There seems like in the past to have been some issues
with the class name being namespaced properly but I did not experience any problems.
this should all lead to seeing a console.log with your event data on any page subscribed to the the channel. But for prosperity sake here is the testing order to help verify each step along the way.
Troubleshooting steps
Is the event configured properly in laravel? Change the BROADCAST_DRIVER=log and verify you get a log entry when you run your controller.
Is the data actually being pushed to redis? with the right channel, etc? open redis-cli montior while you trigger an event and you should see feedback like "PUBLISH" "channel-name" "message"
Is echo server/socketio-server registering the event? look at your terminal that is running the laravel-echo-server start command you should see the event propagate from redis to echo there
Is your bootstrap.js file giving you an open web socket? go to dev-tools and check the network->ws if you see an entry click it and then on messages; make sure you see sent and recieved data. If you dont something is wrong in bootstrap.js
Is your clientside js retrieving data from the websocket event? if not you probably forgot to include you socket.io.js file.
Next Steps
-Implement whisper channels to notify the page of who is currently using the page as well as to unsubscribe the from the echo channel and remove any unneeded listeners
-pass handsontable selected data through the whisper channel and set those cells to readonly where the user is different from the current user
I ended up just adding the redis facade and calling Redis::publish(). My guess here is that I couldn't call an event without having a listener setup. I don't need a listener I just needed the event to fire and push it to redis. the real confusing part is why this works without a hitch in tinker and not in a controller is still a mystery but, I solved the immediate problem so this just gets chalked up to an edge case where I implemented something differently than it was probably designed to be.
"#click event not respond"
also i tried #click.native & #click.prevent
and still nothing happen
this is the example of my code
Try to use console.log instead alert and check browser's console.
I created events using Laravel and am utilizing it in conjunction with Pusher. On my Pusher Debug Console, every time I fire off a event from my Laravel application, it shows up as 'App\Events\testEvent', whereas I need it to show up as just 'testEvent' like it does when I fire off a dummy event using the tool in the Pusher Debug Console.
https://www.screencast.com/t/cxQ30SZh5x
How do I type the code into my Laravel application so that it fires off the event as 'testEvent' instead of 'App\Events\testEvent'?
To fire the event, I am just using web.php in routes folder as follows:
Route::get('/testEvent', function() {
event(new testEvent());
});
You may customize the event name that gets broadcasted using the broadcastAs function on your Event class.
See: https://laravel.com/docs/5.4/broadcasting#broadcast-name
public function broadcastAs()
{
return 'testEvent';
}
It is the namespace the event classes are created under. Look at the top of your event files and you will see namespace App\Events;
Remove the namespace if you don't need it there, although why do you need it removed? I suspect there is another issue. Laravel events and Pusher have been working well together for quite some time.