Socket.io 客户端¶

注解

如果可能的话, 我们建议在客户端使用Feathers和 feathersshots/socketio-client 模块.但是, 如果您想在客户端上使用直接Socket.io连接而不使用Feathers, 请参阅直接连接部分.

@feathersjs/socketio-client¶

$ npm install @feathersjs/socketio-client --save

feathersress/socketio-client 模块允许通过Socket.io套接字连接到通过 Socket.io 客户端公开的服务.

重要

Socket.io也用于 call 服务方法.使用套接字调用方法和接收实时事件通常比使用 Express 更快.因此, 无需在同一客户端应用程序中同时使用REST和Socket.io.

socketio(socket)¶

使用给定套接字和默认选项初始化Socket.io客户端.

const feathers = require(‘@feathersjs/feathers’);
const socketio = require(‘@feathersjs/socketio-client’);
const io = require(‘socket.io-client’);

const socket = io(‘http://api.feathersjs.com’); const app = feathers();

// Set up Socket.io client with the socket
app.configure(socketio(socket));

// Receive real-time events through Socket.io app.service(‘messages’)
.on(‘created’, message => console.log(‘New message created’, message));

// Call the ``messages`` service app.service(‘messages’).create({ text:
‘A message from a REST client’ }); {%- language
name=“@feathersjs/client”, type=“html” -%}

socketio(socket, options)¶

使用指定的套接字和选项初始化Socket.io客户端.

选项可以:

timeout (默认: 5000ms) - 方法调用失败并超时的时间.这通常在调用不存在的服务或服务方法时发生.

const feathers = require('@feathersjs/feathers');
const socketio = require('@feathersjs/socketio-client');
const io = require('socket.io-client');

const socket = io('http://api.feathersjs.com');
const app = feathers();

// Set up Socket.io client with the socket
// And a timeout of 2 seconds
app.configure(socketio(socket, {
  timeout: 2000
}));

要设置服务特定超时, 您可以使用:

app.service('messages').timeout = 3000;

直接连接¶

Feathers 设置一个普通的 Socket.io 服务器, 你可以连接到任何兼容Socket.io的客户端, 通常是 Socket.io客户端来自服务器的 socket.io-client 模块或 /socket.io/socket.io.js.与HTTP调用不同, websockets在浏览器中没有固有的跨源限制, 因此可以连接到任何Feathers服务器.

小技巧

套接字连接URL必须指向服务器根, 这是Feathers将设置Socket.io的地方.

<!-- Connecting to the same URL -->
<script src="/socket.io/socket.io.js">
<script>
  var socket = io();
</script>

<!-- Connecting to a different server -->
<script src="http://localhost:3030/socket.io/socket.io.js">
<script>
  var socket = io('http://localhost:3030/');
</script>

可以通过发出 <methodname> 事件, 然后是服务路径和方法参数来调用服务方法.服务路径是服务已注册的名称(在 app.use 中), 没有前导或尾部斜杠.将使用方法调用的结果或可能发生的任何错误调用 function(error, data) Node约定之后的可选回调.

params 将在服务方法调用中设置为 params.query.其他服务参数可以通过 Socket.io 设置.

如果服务路径或方法不存在, 将返回相应的Feathers错误.

Authentication¶

可以通过发送带有 strategy 和有效负载的 authenticate 事件来验证套接字.有关具体示例, 请参阅 JWT身份验证身份验证章节中的 “直接连接” 部分.

const io = require('socket.io-client');
const socket = io('http://localhost:3030');

socket.emit('authenticate', {
  strategy: 'strategyname',
  ... otherData
}, function(message, data) {
  console.log(message); // message will be null
  console.log(data); // data will be {"accessToken": "your token"}
  // You can now send authenticated messages to the server
});

find¶

从服务中检索所有匹配资源的列表

socket.emit('find', 'messages', { status: 'read', user: 10 }, (error, data) => {
  console.log('Found all messages', data);
});

将在服务器上调用 app.service('messages').find({ query: { status: 'read', user: 10 } }).

get¶

从服务中检索单个资源.

socket.emit('get', 'messages', 1, (error, message) => {
  console.log('Found message', message);
});

将在服务器上调用 app.service('messages').get(1, {}).

socket.emit('get', 'messages', 1, { fetch: 'all' }, (error, message) => {
  console.log('Found message', message);
});

将在服务器上调用 app.service('messages').get(1, { query: { fetch: 'all' } }).

`create`¶

使用 data 创建一个新资源, 它也可以是一个数组.

socket.emit('create', 'messages', {
  text: 'I really have to iron'
}, (error, message) => {
  console.log('Todo created', message);
});

将在服务器上调用 app.service('messages').create({ text: 'I really have to iron' }, {}).

socket.emit('create', 'messages', [
  { text: 'I really have to iron' },
  { text: 'Do laundry' }
]);

将使用数组调用 app.service('messages').create.

update¶

完全替换单个或多个资源.

socket.emit('update', 'messages', 2, {
  text: 'I really have to do laundry'
}, (error, message) => {
  console.log('Todo updated', message);
});

将在服务器上调用 app.service('messages').update(2, { text: 'I really have to do laundry' }, {}). id 也可以是 null 来更新多个资源:

socket.emit('update', 'messages', null, {
  complete: true
}, { complete: false });

将在服务器上调用 app.service('messages').update(null, { complete: true }, { query: { complete: 'false' } }).

小技巧

通常希望 update 替换整个资源, 这就是为什么数据库适配器只支持多个记录的 patch.

patch¶

使用新的 data 合并单个或多个资源的现有数据.

socket.emit('patch', 'messages', 2, {
  read: true
}, (error, message) => {
  console.log('Patched message', message);
});

将在服务器上调用 app.service('messages').patch(2, {read:true}, {}). id 也可以是 null 来更新多个资源:

socket.emit('patch', 'messages', null, {
  complete: true
}, {
  complete: false
}, (error, message) => {
  console.log('Patched message', message);
});

将在服务器上调用 app.service('messages').patch(null, { complete: true }, { query: { complete: false } }) 来更改所有read app.service(‘messages’).

这是由Feathers开箱即用的 API

remove¶

删除一个或多个资源:

socket.emit('remove', 'messages', 2, { cascade: true }, (error, message) => {
  console.log('Removed a message', message);
});

将在服务器上调用 app.service('messages').remove(2, { query: { cascade: true } }). id 也可以是 null 来删除多个资源:

socket.emit('remove', 'messages', null, { read: true });

将在服务器上调用 app.service('messages').remove(null, { query: { read: 'true' } }) 删除所有read app.service(‘messages’).

监听事件¶

通过侦听服务事件, 可以在应用程序中实现实时行为. events 以 servicepath eventname 的形式发送到套接字.

created¶

当服务 create 成功返回时, created 事件将与回调数据一起发布.

var socket = io('http://localhost:3030/');

socket.on('messages created', function(message) {
  console.log('Got a new Todo!', message);
});

updated, patched¶

当服务 update 或 patch 方法成功回调时, updated 和 patched 事件将与回调数据一起发布.

var socket = io('http://localhost:3030/');

socket.on('my/messages updated', function(message) {
  console.log('Got an updated Todo!', message);
});

socket.emit('update', 'my/messages', 1, {
  text: 'Updated text'
}, {}, function(error, callback) {
 // Do something here
});

removed¶

当服务 remove 成功回调时, removed 事件将与回调数据一起发布.

var socket = io('http://localhost:3030/');

socket.on('messages removed', function(message) {
  // Remove element showing the Todo from the page
  $('#message-' + message.id).remove();
});