# @mr_chick/vue_laravel_echo

> A wrapper (and more) for the laravel-echo package

Latest version **1.0.11** (published 2018-06-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @mr_chick/vue_laravel_echo
pnpm add @mr_chick/vue_laravel_echo
yarn add @mr_chick/vue_laravel_echo
bun add @mr_chick/vue_laravel_echo
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.11 |
| Published | 2018-06-29 |
| First published | 2018-06-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 46.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Puiu Cristian |
| Maintainers | mr_chick |
| Keywords | laravel-echo, vue, vue.js, socketio |

## Links

- npm: https://www.npmjs.com/package/@mr_chick/vue_laravel_echo
- Repository: https://github.com/mr-chick/vue_laravel_echo
- Homepage: https://github.com/mr-chick/vue_laravel_echo#readme
- Issues: https://github.com/mr-chick/vue_laravel_echo/issues
- npm.io page: https://npm.io/package/@mr_chick/vue_laravel_echo

## Dependencies (1)

- [laravel-echo](https://npm.io/package/laravel-echo.md) ^1.4.0

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 1.0.11 (latest) — 2018-06-29
- 1.0.10 — 2018-06-28
- 1.0.9 — 2018-06-28
- 1.0.8 — 2018-06-28
- 1.0.7 — 2018-06-27
- 1.0.6 — 2018-06-27
- 1.0.4 — 2018-06-27
- 1.0.3 — 2018-06-26
- 1.0.2 — 2018-06-26
- 1.0.1 — 2018-06-26
- 1.0.0 — 2018-06-26

## README

# Info


This project is based on the [official laravel-echo package](https://laravel.com/docs/5.6/broadcasting)

I tried to implement as much as I could from the docomentation

This plugin works using `socket.io` as broadcaster

TODO:
* Vuex support
* Handle socket connections
* Sugar sintax

--- 

Settings laravel echo is not part of this readme.

### Install

#### Install the package 

```js
npm i @mr_chick/vue_laravel_echo
```

#### with the package installed, you have to import it

```js
import echo from '@mr_chick/vue_laravel_echo'
```
### Attach `socket.io` to window

```js 
npm install --save socket.io-client
```

```js
window.io = require('socket.io-client');
```

#### Attach the plugin to Vue

```js
Vue.use(echo, {
  'broadcaster': {
    'name': 'socket.io'
   },
  'host': window.location.hostname + ':6001',
  'auth' :{
    'headers': {
      'Authorization': 'Bearer ' + process.env.BEARER
    }
  }
})
```

The auth member is needed to authenticate private channels.


If you don't have the token in initialize, you can add it sometime after, but before joining the channels

```js
this.$echo.addAuthToken(`token`);
```

If you use public channels, auth is not needed

### Usage

After installation, you will be able to access echo via `this.$echo`

#### Joining a private channel

You use the `.private(channel)` method to join a private channel
Then, you can chain the listener on the returned instance
```js
this.$echo.private(`user.${process.env.USER_ID_TEST}`).notification((notification) => {
  console.log(notification);
});
```

It will join the private channel `user.${process.env.USER_ID_TEST}` and it will listen for notifications sent from that channel


You can also listen to `events`, the same as notifications, you chain the listener on the returned instance

```js
this.$echo.private(`user.${process.env.USER_ID_TEST}`).listen('TestEvent', (e) => {
  console.log(e);
});
```

#### Joining a public channel

You join a public channel using `.channel(channel)` or `.public(channel)` metod

```js
this.$echo.channel(`user.${process.env.USER_ID_TEST}`).notification((notification) => {
  console.log(notification);
});
```

```js
this.$echo.channel(`user.${process.env.USER_ID_TEST}`).listen('TestEvent', (e) => {
  console.log(e);
});
```

#### Leaving a channel

You leave a channel using `.leave(channel)` method

```js
this.$echo.leave(`user.${process.env.USER_ID_TEST}`);
```

---
_Source: https://npm.io/package/@mr_chick/vue_laravel_echo · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._