可以在握手请求中传递自定义 header 的 Javascript websocket 客户端库

标签 javascript websocket

我需要一个 javascript 库来连接到我的网络套接字服务器,该服务器是使用 python twisted 实现的。我尝试了 native javascript web-socket 客户端,但它没有传递自定义 header 的选项 as per this link .我的网络套接字服务器通过从握手 header 中获取 auth_token 来进行身份验证,就像在 Oauth2 标准中一样。是否有任何可用于 web-socket 客户端的 javascript 库允许在连接时传递自定义 header ?

最佳答案

我很抱歉成为坏消息的传播者......但是 - 正如 the question 中提到的那样您正在引用,您可以从中学习 the standard Websocket API (这不是外部库,它是浏览器自带的)...您不能为 websocket 连接设置自定义 header 。

The WebSocket(url, protocols) constructor takes one or two arguments. The first argument, url, specifies the URL to which to connect. The second, protocols, if present, is either a string or an array of strings. ... Each string in the array is a subprotocol name. The connection will only be established if the server reports that it has selected one of these subprotocols. ...

但是,一切并没有丢失。

因为这是你的 websocket 服务器,你有以下选择:

  1. 我很确定 OAuth2 使用 token 作为 GET 或 POST 请求的参数,而不是作为自定义 header 。这意味着(也许)您可以将 token 作为连接字符串的一部分传递,即:

     websocket = new WebSocket('wss://my.server.com/?access_token=secret_acess_token');
    

    像这样传递 session token 可能并不理想,而且可能会带来安全风险...所以我会在这里选择第二个选项:

  2. 新的 websocket 连接(除非我的浏览器是特殊的)是使用与建立主连接相同的 cookie 启动的 - 这意味着来自 Http 层的所有 cookie 和 session 数据都可以被 websocket 层访问。 ...

    因此,可以设置一个唯一的 cookie - 或者,甚至更好(假设您的 http 和 websocket 共享相同的代码库并且可以很好地协同工作),在服务器端 session 存储中设置一个身份验证 token - 并使用该数据来验证连接或拒绝连接。

由于我不是 Python 专家,这里有一个使用 Ruby 的 Plezi framework 的快速演示(我是作者):

require 'plezi'

class DemoCtrl
   # this is the Http index page response
   def index
      response.write "#{cookies[:notice]}\n\n" if cookies[:notice] && (cookies[:notice] = nil).nil?
      #returning a string automatically appends it to the response.
      "We have cookies where we can place data:\n#{request.cookies.to_s}\n"
   end
   # the login page
   def login
      cookies[:my_token] = "a secret token"
      cookies[:notice] = "logged in"
      redirect_to :index
   end
   # the logout page
   def logout
      cookies[:my_token] = nil
      cookies[:notice] = "logged out"
      redirect_to :index
   end
   # a Plezi callback, called before a websocket connection is accepted.
   # it's  great place for authentication.
   def pre_connect
      puts "Websocket connections gave us cookies where we can place data:\n#{request.cookies.to_s}\n"
      return false unless cookies.to_s[:my_token] == "a secret token"
      # returning true allows the connection to be established
      true
   end
   def on_message data
      puts "echoing #{data}"
      response << "echo: #{data}"
   end
end

# setup the route to our demo
Plezi.route '/', DemoCtrl
# Plezi will start once the script is finished.
# if you are running this in irb, use:
exit

访问:http://loaclhost:3000/

要尝试启动 websocket,请打开 Web 检查器并在控制台中运行以下脚本:

ws = new WebSocket("ws://localhost:3000/"); ws.onopen = function(e) { console.log("open"); }; ws.onmessage = function(e) { console.log(e.data);};

ws.send("Go Bears");

这应该会失败,因为我们还没有验证...

访问http://loaclhost:3000/login然后重试。

现在它应该可以工作了。

尝试 http://loaclhost:3000/logout如果你喜欢的话。

关于可以在握手请求中传递自定义 header 的 Javascript websocket 客户端库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33338883/

相关文章:

javascript - 如何重置 setTimeout

javascript - 如何在鼠标悬停事件处理程序中创建单击事件处理程序?

javascript - 无法追踪的 HTTP 重定向?

java - 从同一端口提供网络套接字和网页

sockets - socket.io 是否将消息排队到断开连接的客户端?

websocket - Websocket中的 's different between "文本框和 "binary frame"是什么?

javascript - 单击另一个时如何从链接中删除颜色

javascript - 从 Vue 中的槽更新父级中的状态

angularjs - 发生服务器端更新时,如何更新 AngularJS 中的 $scope?

javascript - 同时连接太多字符串导致前端长时间阻塞,如何优化?