无法让 WebSharper Javascript 客户端到 运行 托管在 Suave 上
Can't get WebSharper Javascript Client to run hosted on Suave
我正在尝试以下页面中标题为 "Adding client-side functionality" 的示例片段:
https://developers.websharper.com/docs/v4.x/fs/overview
它看起来有点过时并且不能按原样编译,所以基于从中截取该代码的原始存储库,这就是我现在拥有的。
namespace TestSuaveWs
open WebSharper
open WebSharper.Sitelets
open WebSharper.UI
open WebSharper.UI.Html
open WebSharper.UI.Client
module Server =
[<Rpc>]
let DoWork (s: string) =
async {
return System.String(List.ofSeq s |> List.rev |> Array.ofList)
}
[<JavaScript>]
module Client =
open WebSharper.JavaScript
open WebSharper.Html.Client
let Main () =
let input = Input [ Attr.Value "" ]
let output = H1 []
Div [
input
Button [ Text "Send" ]
|>! OnClick (fun _ _ ->
async {
let! data = Server.DoWork input.Value
output.Text <- data
}
|> Async.Start
)
HR []
H4 [ Class "text-muted" ] -- Text "The server responded:"
Div [ Class "jumbotron" ] -< [ output ]
]
module TheSite =
open WebSharper.UI.Server
[<Website>]
let MySite =
Application.SinglePage (fun ctx ->
Content.Page(
Body = [
h1 [] [ text "Say Hi to the server" ]
div [] [ client <@ Client.Main() @> ]
]
)
)
open global.Suave
open Suave.Web
open WebSharper.Suave
let webPart = WebSharperAdapter.ToWebPart(MySite, RootDirectory="../..")
接下来是主程序
namespace TestSuaveWs
module Main =
open System
open System.Threading
open Suave
[<EntryPoint>]
let main argv =
let cts = new CancellationTokenSource()
let conf = { defaultConfig with cancellationToken = cts.Token }
let listening, server = startWebServerAsync conf TheSite.webPart
Async.Start(server, cts.Token)
printfn "Make requests now"
Console.ReadKey true |> ignore
cts.Cancel()
0
程序运行,我可以在localhost:8080上看到文字"Say Hi to the server",但文字下面什么也没有。带有示例的页面上的图片显示了它的外观。应该有一个文本输入字段、一个按钮和一个回复文本。
当我在 Chrome 浏览器中打开 Developer Tools 时,我可以看到有一堆类似的消息,唯一不同的是 javascript 文件名,即 "Failed to load resource: the server responded with a status of 404 WebSharper.Main.min.js:1 (Not Found)"
bin\Debug 文件夹中没有 *.js 文件。我在 VS 2019 中 运行,使用 .NET Framework 4.7.1。
我错过了什么?
我不知道这个示例可以作为名为 "WebSharper 4 Suave-hosted Site" 的模板使用,我是在下载并安装 WebSharper vsix 后才发现的。该模板启动了一个项目,完全按照我试图实现的目标进行。这就是答案。我希望在文档页面中对此有所暗示。
我正在尝试以下页面中标题为 "Adding client-side functionality" 的示例片段:
https://developers.websharper.com/docs/v4.x/fs/overview
它看起来有点过时并且不能按原样编译,所以基于从中截取该代码的原始存储库,这就是我现在拥有的。
namespace TestSuaveWs
open WebSharper
open WebSharper.Sitelets
open WebSharper.UI
open WebSharper.UI.Html
open WebSharper.UI.Client
module Server =
[<Rpc>]
let DoWork (s: string) =
async {
return System.String(List.ofSeq s |> List.rev |> Array.ofList)
}
[<JavaScript>]
module Client =
open WebSharper.JavaScript
open WebSharper.Html.Client
let Main () =
let input = Input [ Attr.Value "" ]
let output = H1 []
Div [
input
Button [ Text "Send" ]
|>! OnClick (fun _ _ ->
async {
let! data = Server.DoWork input.Value
output.Text <- data
}
|> Async.Start
)
HR []
H4 [ Class "text-muted" ] -- Text "The server responded:"
Div [ Class "jumbotron" ] -< [ output ]
]
module TheSite =
open WebSharper.UI.Server
[<Website>]
let MySite =
Application.SinglePage (fun ctx ->
Content.Page(
Body = [
h1 [] [ text "Say Hi to the server" ]
div [] [ client <@ Client.Main() @> ]
]
)
)
open global.Suave
open Suave.Web
open WebSharper.Suave
let webPart = WebSharperAdapter.ToWebPart(MySite, RootDirectory="../..")
接下来是主程序
namespace TestSuaveWs
module Main =
open System
open System.Threading
open Suave
[<EntryPoint>]
let main argv =
let cts = new CancellationTokenSource()
let conf = { defaultConfig with cancellationToken = cts.Token }
let listening, server = startWebServerAsync conf TheSite.webPart
Async.Start(server, cts.Token)
printfn "Make requests now"
Console.ReadKey true |> ignore
cts.Cancel()
0
程序运行,我可以在localhost:8080上看到文字"Say Hi to the server",但文字下面什么也没有。带有示例的页面上的图片显示了它的外观。应该有一个文本输入字段、一个按钮和一个回复文本。
当我在 Chrome 浏览器中打开 Developer Tools 时,我可以看到有一堆类似的消息,唯一不同的是 javascript 文件名,即 "Failed to load resource: the server responded with a status of 404 WebSharper.Main.min.js:1 (Not Found)"
bin\Debug 文件夹中没有 *.js 文件。我在 VS 2019 中 运行,使用 .NET Framework 4.7.1。
我错过了什么?
我不知道这个示例可以作为名为 "WebSharper 4 Suave-hosted Site" 的模板使用,我是在下载并安装 WebSharper vsix 后才发现的。该模板启动了一个项目,完全按照我试图实现的目标进行。这就是答案。我希望在文档页面中对此有所暗示。