建立连接后，凤凰通道无法与前端保持连接(WebSocket握手时出错)

Question

我的WebSocket连接有问题。

我使用Phoenix作为我的API，并在前端使用Vue+Phoenix-socket。

我的浏览器控制台如下所示：

receive: ok feed:1 phx_reply (1) {response: {…}, status: "ok"}
Joined successfully {feed: Array(3)}
WebSocket connection to 'ws://localhost:4000/socket/websocket?vsn=1.0.0' failed: Error during WebSocket handshake: Unexpected response code: 403
push: phoenix heartbeat (2) {}
receive: ok phoenix phx_reply (2) {response: {…}, status: "ok"}
WebSocket connection to 'ws://localhost:4000/socket/websocket?vsn=1.0.0' failed: Error during WebSocket handshake: Unexpected response code: 403

接着…

正如你所看到的，连接可以建立，数据可以通过，但它会发送错误。

所以我查看了Phoenix:

[info] CONNECTED TO TweeterApiWeb.UserSocket in 0┬Ás
Transport: :websocket
Serializer: Phoenix.Socket.V1.JSONSerializer
Parameters: %{"token" => "eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJ0d2VldGVyX2FwaSIsImV4cCI6MTU5NjkxMjAxNiwiaWF0IjoxNTk0NDkyODE2LCJpc3MiOiJ0d2VldGVyX2FwaSIsImp0aSI6IjViYWFlMDRlLTBjMTYtNDEyMi05Y2VlLWZmMzQ2OWM1YWE1YiIsIm5iZiI6MTU5NDQ5MjgxNSwic3ViIjoiMSIsInR5cCI6ImFjY2VzcyJ9.-ZJMyyEBKd0_nHYUBGdaI0qdHn1nuWtpG8sEUHqikBuWTB2sKw9Sk36OsUpXBS5ozRpe2l2VXq8NI58HydIhZA", "vsn" => "1.0.0"}
[debug] QUERY OK source="tweets" db=0.0ms idle=875.0ms
SELECT t0."id", t0."content", t0."comment_count", t0."retweet_count", t0."like_count", t0."profile_id", t0."inserted_at", t0."updated_at" FROM "tweets" AS t0 WHERE (t0."profile_id" = $1) [1]
[info] JOINED feed:1 in 0┬Ás
Parameters: %{}
[info] REFUSED CONNECTION TO TweeterApiWeb.UserSocket in 0┬Ás
Transport: :websocket
Serializer: Phoenix.Socket.V1.JSONSerializer
Parameters: %{"vsn" => "1.0.0"}

看起来连接被拒绝了，因为params中没有令牌，但我真的不明白为什么。

我只在套接字连接时检查身份验证，因此一旦建立连接，令牌应该是完全不必要的。

这是我的user_socket.ex:

defmodule TweeterApiWeb.UserSocket do
use Phoenix.Socket
alias TweeterApi.Accounts
alias TweeterApi.Accounts.Guardian
## Channels
channel "feed:*", TweeterApiWeb.FeedChannel
@impl true
def connect(%{"token" => token}, socket, _connect_info) do
case Guardian.resource_from_token(token) do
{:ok, user, _claims} ->
current_profile = Accounts.get_profile_by(user_id: user.id)
{:ok, assign(socket, :current_profile_id, current_profile.id)}
{:error, _reason} ->
:error
end
end
def connect(_params, _socket, _connect_info), do: :error
@impl true
def id(socket), do: "users_socket:#{socket.assigns.current_profile_id}"
end

通道代码：

defmodule TweeterApiWeb.FeedChannel do
use TweeterApiWeb, :channel
alias TweeterApi.Tweets
def join("feed:" <> current_profile_id, _params, socket) do
if String.to_integer(current_profile_id) === socket.assigns.current_profile_id do
current_profile_tweets = Tweets.list_profile_tweets(current_profile_id)
response = %{
feed:
Phoenix.View.render_many(current_profile_tweets, TweeterApiWeb.TweetView, "tweet.json")
}
{:ok, response, socket}
else
{:error, %{reson: "Not authorized"}}
end
end
def terminate(_reason, socket) do
{:ok, socket}
end
end

和Vue.js代码：

<script>
import UserProfileSection from '@/components/sections/UserProfileSection.vue'
import TimelineSection from '@/components/sections/TimelineSection.vue'
import FollowPropositionsSection from '@/components/sections/FollowPropositionsSection.vue'
import NewTweetForm from '@/components/sections/NewTweetForm.vue'
import { mapGetters } from 'vuex'
import { Socket } from 'phoenix-socket'
export default {
name: 'AppFeed',
components: {
UserProfileSection,
TimelineSection,
FollowPropositionsSection,
NewTweetForm,
},
data() {
return {
tweets: [],
}
},
computed: {
...mapGetters('auth', ['currentProfileId', 'token']),
...mapGetters('feed', ['tweets'])
},
created() {
},
mounted() {
const WEBSOCKET_URL = 'ws://localhost:4000'
const socket = new Socket(`${WEBSOCKET_URL}/socket`, {
params: { token: this.token },
logger: (kind, msg, data) => {
console.log(`${kind}: ${msg}`, data)
},
})
socket.connect()
this.channel = socket.channel('feed:' + this.currentProfileId, {})
this.channel
.join()
.receive('ok', (resp) => {
console.log('Joined successfully', resp)
console.log(resp)
this.tweets = resp.feed
})
.receive('error', (resp) => {
console.log('Unable to join', resp)
})
}
}
</script>

Answer 1

在典型的phoenix应用程序assign中，用户的令牌被分配给布局主体中的窗口。

<script>window.userToken = "<%= assigns[:user_token] %>"</script>

对于assets/js/socket.js 中的套接字创建

let socket = new Socket("/socket", {
params: {token: window.userToken},
})

我相信，当您创建套接字{ token: this.token }时，this.token是未定义的，因此它不会在params中发送。

编辑：如果你不在乎令牌，就不要对其进行模式匹配。如果没有令牌，你将跳到第二个连接中，该连接将对任何内容进行模式匹配并拒绝连接。