real-time - 在Phoenix框架中实时显示rethinkDB表

Question

我正在尝试比我的 previous question regarding tables from RethinkDB in Phoenix 更进一步.

现在我尝试通过 channel 检索它们，以便实时显示表中的新插入内容。

我已经通过handle_in函数插入到表中:

def handle_in("new_person", %{"firstName" => firstName, "lastName" => lastName}, socket) do
        broadcast! socket, "new_person", %{firstName: firstName, lastName: lastName}
    table("users")
    |> insert(%{first_name: firstName, last_name: lastName})
    |> RethinkExample.Database.run
    {:noreply, socket}
    end

在 app.js 中:

dbInsert.on("click", event => { //Detect a click on the dbInsert div (to act as a button)
  //Use a module from the channel to create a new person
  chan.push("new_person", {firstName: firstName.val(), lastName: lastName.val()});
  // Clear the fields once the push has been made
  firstName.val("");
    lastName.val("");
});

chan.join().receive("ok", chan => {
  console.log("Ok");
});

我应该使用哪个函数来处理:

table("users")
|> RethinkExample.Database.run

如果数据现在是 channel 而不是 html，我应该如何呈现数据？我可以使用 HTML+Javascript 渲染插入的人员，但我想要的是从数据库中检索新用户并使用我的其他表结果实时渲染它。

这是我用视觉语言表达的方式:

用户.html.eex

<div class="jumbotron">
  <div id="userList">
    <%= for %{"first_name" => first_name, "last_name" => last_name} <- @users.data do %>
      <p><%= "#{first_name} #{last_name}" %>!</p>
    <% end %>
  </div>
</div>

<div class="dbOperation">
    First name: <input type="text" id="firstName"><br>
    Last name: <input type="text" id="lastName"><br>
    <div id="dbInsert">Insert</div>
    <br>
    <div id="userToInsert">User to insert: </div>
</div>

用户 Controller .ex

defmodule RethinkExample.UsersController do
  use RethinkExample.Web, :controller
  use RethinkDB.Query


    def users(conn, _params) do
    # List all elements of a table from the database
        q = table("users")
      # Query for filtering results:
            # |> filter(%{last_name: "Palmer"})
            |> RethinkExample.Database.run #Run the query through the database
        render conn, "users.html", users: q #Render users searched on the users template
    end
end

people_channel.ex

defmodule RethinkExample.PeopleChannel do
  use Phoenix.Channel
    use RethinkDB.Query

  #Handles the insert subtopic of people
  def join("people:insert", auth_msg, socket) do
    {:ok, socket}
  end

  # handles any other subtopic as the people ID, ie `"people:12"`, `"people:34"`
  def join("people:" <> _private_room_id, _auth_msg, socket) do
    {:error, %{reason: "unauthorized"}}
  end

    def handle_in("new_person", %{"firstName" => firstName, "lastName" => lastName}, socket) do
        broadcast! socket, "new_person", %{firstName: firstName, lastName: lastName}
    query = table("users")
    |> insert(%{first_name: firstName, last_name: lastName})
    |> RethinkExample.Database.run
    new_person = %{"id": hd(query.data["generated_keys"]), "firstName": firstName, "lastName": lastName}
    broadcast! socket, "new_person", new_person
    {:noreply, socket}
    end

    def handle_out("new_person", payload, socket) do
      push socket, "new_person", payload
      {:noreply, socket}
    end
end

app.js

import {Socket} from "phoenix"

let App = {
}

export default App

// Fetch fields from HTML through Jquery
let firstName = $("#firstName")
let lastName = $("#lastName")
let dbInsert = $("#dbInsert")
let userToInsert = $("#userToInsert")
let userList = $("#userList")

let socket = new Socket("/ws")  //Declare a new socket
socket.connect() //Connect to the created socket
let chan = socket.chan("people:insert", {}) //Assign the people insertion channel to the socket

dbInsert.on("click", event => { //Detect a click on the dbInsert div (to act as a button)
  //Use a module from the channel to create a new person
  chan.push("new_person", {firstName: firstName.val(), lastName: lastName.val()});
  // Clear the fields once the push has been made
  firstName.val("");
    lastName.val("");
})

chan.on("new_person", payload => {
  userToInsert.append(`<br/>[${Date()}] ${payload.firstName} ${payload.lastName}`);
  console.log("New Person", payload);
  userList.append(`<br><p> ${payload.firstName} ${payload.lastName}!</p>`);
})

chan.join().receive("ok", chan => {
  console.log("Ok");
})

Answer 1

您的 channel 中需要有一个 handle_out 函数来监听插入。如果您使用 broadcast_from! 那么发件人将被排除在外，如果您使用 broadcast! 那么发件人也会收到消息。

将以下内容添加到您的 channel :

  def handle_out("new_person", payload, socket) do
    push socket, "new_person", payload
    {:noreply, socket}
  end

以及您的 JS 客户端的以下内容:

chan.on("new_person", payload => {
  console.log("New Person", payload);
});

channel 文档位于 http://www.phoenixframework.org/docs/channels

编辑

在 Rethink 中插入记录时 - 输出如下所示:

%RethinkDB.Record{data: %{"deleted" => 0, "errors" => 0,
   "generated_keys" => ["7136199a-564b-42af-ad49-5c84cbd5b3e7"],
   "inserted" => 1, "replaced" => 0, "skipped" => 0, "unchanged" => 0}}

我们知道您从 rethink 查询返回的数据如下所示:

{"first_name" => "John",
    "id" => "57c5d0d2-5285-4a24-a999-8bb7e2081661", "last_name" => "Smith"},

因此 - 为了将新记录广播到浏览器，我们希望复制此数据结构，因此如果您将 handle_in 函数更改为:

def handle_in("new_person", %{"firstName" => first_name, "lastName" => last_name}, socket) do
  query = table("users")
  |> insert(%{first_name: firstName, last_name: lastName})
  |> RethinkExample.Database.run
  new_person = %{"id": hd(query.data["generated_keys"]), "first_name": first_name, "last_name": last_name}
  broadcast! socket, "new_person", new_person
  {:noreply, socket}
end

然后 - 如果您按照上述步骤使用 handle_out 和 chat.on，那么您将在 JavaScript 控制台中看到该人已注销。从那里 - 您可以使用 Javascript 将其附加到您的 DOM。