ASP.NET Core 2.1基于SignalR和Vue实时通讯

最新推荐文章于 2022-08-23 09:51:32 发布

那人_那事

最新推荐文章于 2022-08-23 09:51:32 发布

阅读量590

点赞数

分类专栏： C# 文章标签： vue.js asp.net javascript

本文链接：https://blog.csdn.net/u014786187/article/details/122873208

版权

C# 专栏收录该内容

45 篇文章 8 订阅

订阅专栏

创建ASP.NET Core Web应用空项目模板程序（SDK版本.NET Core 2.1）
在项目上右击 -> 添加 -> 新建文件夹 -> 名称命名为Hubs
在Hubs文件夹上右击 -> 添加 -> 类 -> 命名为ChatHub
在wwwroot文件夹上右击 -> 添加 -> 类 -> 命名为js
在项目上右击 -> 添加 -> 添加客户端库
a. 提供程序选择unpkg
b. 库输入@aspnet/signalr@1.1.4
c. 选中选择特定文件
d. 勾选signalr.js、signalr.js.map、signalr.min.js和signalr.min.js.map
e. 目标位置改为wwwroot/js/
在项目上右击 -> 添加 -> 添加客户端库
a. 提供程序选择cdnjs
b. 库输入vue@2.6.14
c. 选中选择特定文件
d. 勾选vue.js和vue.min.js
e. 目标位置改为wwwroot/js/
在js文件夹上右击 -> 添加 -> 新建项 -> 选择JavaScript 文件 -> 名称改为site.js

"use strict";

var app = new Vue({
    el: '#app',
    data: {
        message: ''
    },
    created() {
        // 监听事件
        this.$on('receiveMessage', (msg) => {
            this.message = msg;
        })
    },
})

var hub = new signalR.HubConnectionBuilder().withUrl("/chatHub").build()

hub.start().then(function () {
    // 使用定时器请求数据
    setInterval(function () {
        hub.invoke("Send").catch(function (err) {
            return console.error(err.toString());
        });
    }, 1000);
}).catch(function (err) {
    return console.error(err.toString());
});

hub.on("Receive", function (msg) {
    // 使用事件触发
    app.$emit("receiveMessage", msg);
});

在wwwroot文件夹上右击 -> 添加 -> 新建项 -> 选择HTML 页 -> 名称改为Index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Home Page</title>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
    <script src="./js/vue/vue.min.js"></script>
    <script src="./js/dist/browser/signalr.min.js"></script>
    <script src="./js/site.js"></script>
</body>
</html>

修改StartUp.cs类

public class Startup
{
    // This method gets called by the runtime. Use this method to add services to the container.
    // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors(options => options.AddPolicy("CorsPolicy",
        builder =>
        {
            builder.AllowAnyMethod().AllowAnyHeader()
                    .AllowCredentials();
        }));

        services.AddSignalR();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        // 允许跨域请求及使用静态文件作为请求路径服务
        app.UseHttpsRedirection()
            .UseDefaultFiles()
            .UseCors("CorsPolicy")
            .UseSignalR(route =>
        {
            route.MapHub<ChatHub>("/chathub");
        }).UseStaticFiles();

        //app.Run(async (context) =>
        //{
        //    await context.Response.WriteAsync("Hello World!");
        //});
    }
}

那人_那事

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ASP.NET Core 2.1基于SignalR和Vue实时通讯

创建ASP.NET Core Web应用程序的空项目模板（SDK版本.NET Core -> ASP.NET Core2.1）在项目StartUp类内容修改如下：public class Startup{ // This method gets called by the runtime. Use this method to add services to the container. // For more information on how to configu.
复制链接

扫一扫