Skip to content

arustler/oc-websockets

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

October WebSockets

Add real-time features to your OctoberCMS project.

Usage

Start the server

php artisan websockets:run

You can specify a --port if you want to, default is 8080.

Attach the component

Add the client component to your page/layout. You can set an uri property if you are running on a different port. Default is ws://localhost:8080/.

[websocket]
==

The API

It uses an AJAX framework-like API, is familiar for OctoberCMS developers

data-websocket-event="name"

It fires up send() method with the specified event name.

data-websocket-oneventname="console.log(event)"

It evals the informed script, just like AJAX framework with a data argument.

You are ready to rock on sockets. Build a chat app!

Don't forget to add jQuery and {% scripts %} placeholder.

url = "websockets"
[websocket]
==
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Web Sockets</title>
    </head>
    <body>
        <ul data-websocket-onmessage="$(this).append('<li>'+event.payload.text+'</li>')"></ul>
        
        <form role="form" data-websocket-event="message">
            <input type="text" name="text">
            <button type="submit">Send</button>
        </form>
        
        <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
        {% scripts %}
    </body>
</html>

About

Add real-time features to your OctoberCMS project.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • PHP 63.8%
  • JavaScript 36.2%