example/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>feathers-distributed</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.js"></script>
<script type="text/javascript" src="https://unpkg.com/@feathersjs/client@^5.0.0-pre.22/dist/feathers.js"></script>
<script type="text/javascript">
var socket = io('http://localhost:3030', {
transports: ['websocket'],
path: ''
});
var client = feathers.default()
.configure(feathers.socketio(socket))
.configure(feathers.authentication({ storage: window.localStorage }));
var todoService = client.service('todos');
todoService.timeout = 10000;
todoService.on('created', function(data) {
var appElement = document.getElementById('app')
appElement.innerHTML += '<p>Received created TODO service event:</p><pre>' + data.title + '</pre>'
console.log('todos:created', data.title)
})
// This one should fail
todoService.find({})
.catch(error => {
var appElement = document.getElementById('app')
appElement.innerHTML += '<p>Unauthenticated call to the TODO service gives this result:</p><pre>' + error + '</pre>'
console.log('Unauthenticated!', error)
})
client.authenticate({
strategy: 'local',
email: 'user@test.com',
password: 'password'
}).then(function(result){
console.log('Authenticated!', result);
var appElement = document.getElementById('app')
todoService.find({})
.then(function(todos){
var html = '<p>Authenticated call to the TODO service gives this result:</p><ul>'
for (var i = 0; i < todos.total; i++) {
html += '<li>' + todos.data[i].title + ' with ID ' + todos.data[i]._id + ' : ' + todos.data[i].description + '</li>'
}
html += '</ul>'
appElement.innerHTML += html
})
.catch(function(error){
appElement.innerHTML += '<p>Authenticated call to the TODO service failed with this error:</p><pre>' + error + '</pre>'
console.error('Error accessing service!', error);
});
}).catch(function(error){
console.error('Error authenticating!', error);
});
</script>
</head>
<body>
<h1>feathers-distributed</h1>
<div id="app"></div>
</body>
</html>