This add-on for DDEV provides a simple, extensible websocket server. This server allows developers to send/receive messages between the browser and the server without the need for a page refresh.
To install this add-on, run the following command:
ddev add-on get ddev/ddev-websocket
ddev restart
Plugins are JavaScript files that can be added to the .ddev/js/plugins directory. Each plugin may export functions for the following events:
onConnection: Called when a new connection is established.onMessage: Called when a message is received from the client.onError: Called when an error occurs.onClose: Called when the connection is closed.Plugins do not need to implement all of these functions, all are opt-in. Each function is called with the individual connection as this, and the WebSocketServer instance as the first argument.
A sample plugin pong.example.js is provided in the .ddev/js/plugins directory, and by default is loaded by the server on startup:
The websocket server is available at http://<project-name>.ddev.site:8080, and is created using the ws package. Connections are initialized in the browser using the WebSocket constructor:
const ws = new WebSocket('wss://<project-name>.ddev.site:8080');
To use the pong plugin, run the following command in your browser’s console:
const ws = new WebSocket('wss://<project-name>.ddev.site:8080');
ws.onmessage = ({data}) => console.log(data);
// "pong connected"
ws.send('ping');
// "pong"
ws.send('ping all');
// "pong"
// (appears in all connected clients)
ws.close();
// View ddev logs
To view the server logs as you communicate back and forth, run the following command:
ddev logs -s websocket -f