Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matviib/notifier
NO LIBRARIES socket per page bridge for your Laravel application. (CLIENT PART INCLUDED)
https://github.com/matviib/notifier
composer-library composer-package laravel laravel-5 laravel-5-package laravel-application laravel5 laravel55 notifications notifier real-time socket socket-client socket-communication socket-programming socket-server sockets sockets-easy socketserver socketstream
Last synced: 28 days ago
JSON representation
NO LIBRARIES socket per page bridge for your Laravel application. (CLIENT PART INCLUDED)
- Host: GitHub
- URL: https://github.com/matviib/notifier
- Owner: MatviiB
- License: mit
- Created: 2018-01-18T12:48:35.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-08T20:53:02.000Z (almost 6 years ago)
- Last Synced: 2024-09-28T19:03:13.770Z (about 1 month ago)
- Topics: composer-library, composer-package, laravel, laravel-5, laravel-5-package, laravel-application, laravel5, laravel55, notifications, notifier, real-time, socket, socket-client, socket-communication, socket-programming, socket-server, sockets, sockets-easy, socketserver, socketstream
- Language: PHP
- Homepage:
- Size: 137 KB
- Stars: 62
- Watchers: 6
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### Base concepts
You don't need socket.io, pusher.js, jQuery, bootstrap, node.js, vue.js to start using this package.
This package can be used for sending data synchronously to each user.
This package sends data ONLY to named routes declared as `GET`.
You will get your own socket server on back-end and your clients will connect to it directly, without any third-party requests to be send.
You will have pretty notifications from scratch.
To view available routes you can run `php artisan notifier:init show` command. It will display available routes in the table and initiate the socket server.
| Code | Description |
| --- | --- |
| `event(new Notify($data));` | - send to all routes. |
| `event(new Notify($data, $routes));` |- send to routes in `$routes` array. |
| `event(new Notify($data, $routes, $users));` | - send to routes in `$routes` and only to users in `$users`.|
### Installation
```
composer require matviib/notifier
```
For Laravel < 5.5 add provider to config/app.php
```php
MatviiB\Notifier\NotifierServiceProvider::class,
```
For publish notifier config file and js file for notifications out of the box:
```sh
php artisan vendor:publish
```
and choose "Provider: MatviiB\Notifier\NotifierServiceProvider" if requested.
### Starting server
Add worker daemon for ```php artisan notifier:init``` process with Supervisor,
OR
Just run ```php artisan notifier:init``` in terminal.
If you use SSL you need add to your `nginx` configuration file to server block:
```
location /websocket {
proxy_pass http://:; #server host and port
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
# Timeout configuration.
proxy_redirect off;
proxy_connect_timeout 300;
proxy_send_timeout 300;
proxy_read_timeout 300;
}
```
### Usage
At first you need to add `@include('notifier::connect')` before using `socket.addEventListener()` in your view or main layout to use it on ALL pages.
If you want use notifications from the scratch you need to add `@include('notifier::connect_and_show')` to the view.
Anywhere in your back-end add next event:
`event(new Notify($data));`
On front-end part add event listener
```
socket.addEventListener('message', function (event) {
console.log('Message from server', event.data);
});
```
### Use built-in notifications.
Built-in notifications is a vue.js with [vue-notifications](https://github.com/euvl/vue-notification) plugin. If you already use vue.js in application you can just add this plugin yourself.
##### Mapping `$data` parameter.
| Parameter | Description |
| --- | --- |
| `'note' => 1,` | - use notes `true` |
| `'type' => 'warn|success|error|info',` | - type of note |
| `'title' => 'TEXT'` | - title of the note |
| `'text' => 'Lorem ipsum'` | - note's body |
##### Positioning.
In `config/notifier.php` you can modify position where notifications will be shown.
```
// Horizontal options: left, center, right
// Vertical options: top, bottom
'position' => [
'vertical' => 'bottom',
'horizontal' => 'right'
]
```
## Security
This package allows one way messages - only from server to client.
All messages from client after connecting will be ignored.
From server side messages protected with socket_pass parameter from notifier config.
Channels to users protected with unique hash.
## Example with charts
After installation add to web.php
```
Route::get('chart', function () {
return view('chart');
})->name('chart');
```
create view `/resources/views/chart.blade.php`
```
Chart
@include('notifier::connect')
var data = [12, 19, 3, 17, 6, 3, 7, 45, 60, 25];
var myChart = new Chart(document.getElementById('myChart'), {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
datasets: [{
label: 'example',
data: data
}]
}
});
socket.addEventListener('message', function (event) {
myChart.data.datasets[0].data.splice(0, 1);
myChart.data.datasets[0].data.push(JSON.parse(event.data).data.value);
myChart.update();
});
```
In .env fix your APP_URL `APP_URL=http://<>`
Create test command `php artisan make:command Test`
```
use MatviiB\Notifier\Events\Notify;
...
protected $signature = 'test';
public function handle()
{
while ($i < 100) {
$value = random_int(10, 100);
$data['value'] = $value;
event(new Notify($data, ['chart']));
usleep(rand(100000, 500000));
}
}
```
Run: `php artisan notifier:init`
Run in another shell: `php artisan test`
Open `/chart` page.
### Usage Example
Send new values to chart on some page synchronously to each user:
`event(new Notify($data, ['chart']));`
Or to users with `id` 3 and 5: `event(new Notify($data, ['chart'], [3, 5]));`
