MongoDB+SignalR+Hangfire+Vue2+百度地图实现GPS实时定位
<h3 id="mongodbsignalrhangfirevue2百度地图实现gps实时定位">MongoDB+SignalR+Hangfire+Vue2+百度地图实现GPS实时定位</h3><h5 id="一实现效果">一、实现效果</h5>
<p><img src="https://img2023.cnblogs.com/blog/3261135/202311/3261135-20231102222729414-1811168353.gif" alt="" loading="lazy"></p>
<h5 id="二安装mongodb">二、安装MongoDB</h5>
<p>可以自行参考菜鸟链接:MongoDB 教程 | 菜鸟教程 (runoob.com)</p>
<h6 id="1下载mongodb数据库安装包">1.下载mongodb数据库安装包：</h6>
<p>网盘链接:https://pan.baidu.com/s/4rb1fOkc</p>
<h6 id="2进入mongodb-win32-x86_64-windows-509bin路径下创建db文件夹">2.进入\mongodb-win32-x86_64-windows-5.0.9\bin路径下创建db文件夹</h6>
<p><img src="https://img2023.cnblogs.com/blog/3261135/202311/3261135-20231102222907880-329799020.png" alt="" loading="lazy"></p>
<h6 id="3启动服务">3.启动服务</h6>
<p>在bin目录下输入cmd+回车，输入命令:mongod --dbpath+你自己的db文件夹路径</p>
<p>比如我的文件目录为:E:\MongoDB\mongodb-win32-x86_64-windows-5.0.9\bin\db</p>
<p><img src="https://img2023.cnblogs.com/blog/3261135/202311/3261135-20231102222944333-147410955.png" alt="" loading="lazy"></p>
<h6 id="4测试是否启动服务">4.测试是否启动服务</h6>
<h5 id="上一个黑框不要关">上一个黑框不要关!!!!!!!</h5>
<p>在bin目录下再次输入cmd+回车，输入命令:mongo.exe将会看到如下画面2+2=4就证明连接成功了!!!(你太棒了)</p>
<p><img src="https://img2023.cnblogs.com/blog/3261135/202311/3261135-20231102223020468-1823456263.png" alt="" loading="lazy"></p>
<h5 id="三向mongodb中添加坐标数据">三、向MongoDb中添加坐标数据</h5>
<h6 id="1我这里使用是的windowsform模拟gps向mongod添加的数据大家可以自行克隆源码">1.我这里使用是的WindowsForm模拟GPS向mongod添加的数据，大家可以自行克隆源码</h6>
<p>git地址:https://gitee.com/ctrlzs/indowsforms.git</p>
<h6 id="2如何使用程序">2.如何使用程序:</h6>
<ul>
<li>坐标数据来源:你需要一个txt文本，将坐标数据放入文档中，然后将文件路径复制下来</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/3261135/202311/3261135-20231102223151557-514543295.png" alt="" loading="lazy"></p>
<ul>
<li>最好和你的WindowsForm项目放在一起</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/3261135/202311/3261135-20231102223228074-1456598360.png" alt="" loading="lazy"></p>
<ul>
<li>进入WindowsForm项目找到From1的设计随便双击个控件</li>
<li>找到下面这段代码</li>
</ul>
<pre><code class="language-c#"> private void button3_Click(object sender, EventArgs e)
{
//文件路径
//string filePath = @"C:\D盘\新建 文本文档.txt";
string filePath = @"D:\桌面\代码\winfrom\坐标数据.txt";
//文本读取器
using (TextReader reader = new StreamReader(filePath, System.Text.Encoding.UTF8))
{
//一次性读完
string textContent = reader.ReadToEnd();
//输出读取的内容
//Console.WriteLine(textContent);
textBox1.Text = textContent;
}
}
</code></pre>
<ul>
<li>
<p>将filePath的参数路径换成你的txt文档位置</p>
<p>然后运行项目点击获取坐标你将会获得一大批数据，也就是你txt里的坐标数据</p>
<p>然后点击添加就会自动在你的mongodb中创建一个名为myDB06的文档数据库和名为tutorial0文档，你会发现有个进度条我这里有428条所以设置进度条数据最大为428，你可以根据自己的数据量进行自己更改，这里就不浪费时间了，自己百度如何更改</p>
<h6 id="到这里mongodb基本配置完毕">到这里MongoDb基本配置完毕！！！！</h6>
</li>
</ul>
<h4 id="四打开项目配置mongodb">四、打开项目配置MongoDb</h4>
<p>我这里是服务器端使用的是ABP项目</p>
<h6 id="1下载包mongodbdriver">1.下载包：MongoDB.Driver</h6>
<p><img src="https://img2023.cnblogs.com/blog/3261135/202311/3261135-20231102223312178-1011111632.png" alt="" loading="lazy"></p>
<h6 id="2引用命名空间">2.引用命名空间</h6>
<p>using MongoDB.Bson;<br>
using MongoDB.Driver;</p>
<p>读取mongodb数据代码如下:</p>
<p>这里有个MongoDto,你需要自行创建</p>
<p><img src="https://img2023.cnblogs.com/blog/3261135/202311/3261135-20231102223359548-426428709.png" alt="" loading="lazy"></p>
<pre><code class="language-c#"> public async Task GetLatService()
{
//连接mongodb数据库
string connectionString = "mongodb://127.0.0.1:27017";
//创建了一个MongoClient对象 mongoClient，并传入连接字符串作为构造函数参数，以创建与 MongoDB 服务器的连接。
MongoClient mongoClient = new MongoClient(connectionString);
//通过GetDatabase方法从mongoClient 获取了一个名为 "myDB06" 的数据库的引用，并将其赋值给 database。
IMongoDatabase database = mongoClient.GetDatabase("myDB06");
//定义了一个常量字符串collectionName，表示要查询的集合的名称，这里是 "tutorial0"。
const string collectionName = "tutorial0";
//使用 GetCollection<BsonDocument>方法从database 中获取了一个名为 collectionName 的集合的引用，并将其赋值给 collection。这里的 BsonDocument 表示查询结果的文档类型。
var collection = database.GetCollection<BsonDocument>(collectionName);
//创建了一个空的 BsonDocument 对象 filter，用作查询的过滤条件。
var filter = new BsonDocument();
//使用collection 的 Find 方法，结合 filter 对象执行查询操作，并通过 ToListAsync 方法返回查询结果的一个异步可枚举集合。
var list = Task.Run(async () => await collection.Find(filter).ToListAsync()).Result;
var resultList = list.Select(bsonDocument => bsonDocument.ToDictionary()).Select(dictionary => new MongoDto
{
x = dictionary.GetValueOrDefault("x").ToString(),
y = dictionary.GetValueOrDefault("y").ToString()
}).ToList();
foreach (var item in resultList)
{
//这里是所有配置完后通过SignalR发送消息(所有配置完毕后把注释删掉!!)
//var a = (item.y).Replace("\r", "");
//x:经度 y:纬度
//await _hub.Clients.All.SendAsync("ReceiveLog", item.x,a);
//Thread.Sleep(2000);
}
}
</code></pre>
<h4 id="五配置signalr实现实时发送消息">五、配置SignalR实现实时发送消息</h4>
<h6 id="1常规操作下载包abp项目下载voloabpaspnetcoresignalr">1.常规操作下载包ABP项目下载:Volo.Abp.AspNetCore.SignalR</h6>
<p><img src="https://img2023.cnblogs.com/blog/3261135/202311/3261135-20231102223445519-394377417.png" alt="" loading="lazy"></p>
<h6 id="2进入配置项配置signalr">2.进入配置项配置SignalR</h6>
<ul>
<li>
<p>首先将依赖加入项目中</p>
<p>以下内容漂红线的同学看这里！！</p>
<p>1.检查是否安装成功上面这个包</p>
<p>2.试试引用命名空间using Volo.Abp.AspNetCore.SignalR;</p>
<p>3.看看包版本是否匹配</p>
<pre><code class="language-c#">typeof(AbpAspNetCoreSignalRModule)
</code></pre>
</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/3261135/202311/3261135-20231102223531598-1433401101.png" alt="" loading="lazy"></p>
<ul>
<li>打开配置项注入服务: services.AddSignalR();</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/3261135/202311/3261135-20231103114419412-1160449037.png" alt="" loading="lazy"></p>
<ul>
<li>
<p>创建一个类继承Hub类来作为客户端和服务端的通信中心</p>
<p>继承飘红线的引用命名空间:</p>
<pre><code class="language-c#">using Microsoft.AspNetCore.SignalR;
</code></pre>
</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/3261135/202311/3261135-20231102223646825-491341106.png" alt="" loading="lazy"></p>
<ul>
<li>
<p>然后找到Program.cs</p>
<pre><code class="language-c#">app.MapHub<ChatHub>("/Chat");
</code></pre>
</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/3261135/202311/3261135-20231102223736862-510604168.png" alt="" loading="lazy"></p>
<ul>
<li>
<p>马上了不要着急哦,我们回到你Mongodb数据获取的方法中,使用构造函数将SignalR引过来,就可以使用了</p>
<pre><code class="language-c#"> readonly IHubContext<ChatHub> _hub;
public MapService(IHubContext<ChatHub> hub)
{
_hub = hub;
}
</code></pre>
</li>
</ul>
<p>像这样:</p>
<p><img src="https://img2023.cnblogs.com/blog/3261135/202311/3261135-20231102223825755-10452704.png" alt="" loading="lazy"></p>
<ul>
<li>
<p>然后可以运行你的项目在地址栏中输入上面Program.cs中你自己写的地址,我这里是/Chat,看到这段话恭喜你配置成功!!!(你太棒了)</p>
<p><img src="https://img2023.cnblogs.com/blog/3261135/202311/3261135-20231102223904585-1805391998.png" alt="" loading="lazy"></p>
</li>
</ul>
<h4 id="六配置hangfire定时任务">六、配置Hangfire定时任务</h4>
<h6 id="1下载nuget包注意这里你如果使用的是其他数据库请参阅其他文档本项目是mysql">1.下载NuGet包(注意:这里你如果使用的是其他数据库请参阅其他文档,本项目是MySql)</h6>
<p><img src="https://img2023.cnblogs.com/blog/3261135/202311/3261135-20231102223940500-1920391044.png" alt="" loading="lazy"></p>
<p><img src="https://img2023.cnblogs.com/blog/3261135/202311/3261135-20231102223959836-1644610353.png" alt="" loading="lazy"></p>
<h6 id="2配置hangfire">2.配置Hangfire</h6>
<ul>
<li>
<p>首先将包依加进去(看清楚是Hangfire那一行)</p>
<pre><code class="language-c#"> typeof(AbpBackgroundWorkersHangfireModule),//Hangfire
</code></pre>
</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/3261135/202311/3261135-20231102224034131-99244344.png" alt="" loading="lazy"></p>
<ul>
<li>
<p>然后进入appsettings.json配置连接字符串</p>
<p>换成你自己的连接字符串:</p>
<pre><code class="language-c#"> "HangfireConnection": "Server=10.31.60.8;Database=hangfiretest;uid=root;pwd=2334362423;port=3306;Allow User Variables=true;"
</code></pre>
</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/3261135/202311/3261135-20231102224101380-1286347215.png" alt="" loading="lazy"></p>
<ul>
<li>
<p>配置连接</p>
<p>代码在这可以直接复制粘贴</p>
<pre><code class="language-c#">
ConfigureHangfire(context, configuration);//将配置写入项目中
//配置Hangfire数据库连接
private void ConfigureHangfire(ServiceConfigurationContext context, IConfiguration configuration)
{
context.Services.AddHangfire(config =>
{
config.UseStorage(new MySqlStorage(configuration.GetConnectionString("HangfireConnection"), new MySqlStorageOptions { }));
});
}
</code></pre>
</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/3261135/202311/3261135-20231102224133446-1137050934.png" alt="" loading="lazy"></p>
<ul>
<li>
<p>打开仪表盘、调用需要执行的方法</p>
<pre><code class="language-c#"> //授权Hangfire仪表盘
app.UseHangfireDashboard();
var jobId = BackgroundJob.Enqueue<MapService>(
x => x.GetLatService());
</code></pre>
</li>
</ul>
<p><img src="https://img2023.cnblogs.com/blog/3261135/202311/3261135-20231102224204483-523407387.png" alt="" loading="lazy"></p>
<h6 id="3配置完成后运行项目在地址栏输入hangfire即可看到如下画面恭喜你hangfire配置成功">3.配置完成后运行项目,在地址栏输入/hangfire即可看到如下画面(恭喜你hangfire配置成功!!!)</h6>
<p><img src="https://img2023.cnblogs.com/blog/3261135/202311/3261135-20231102224218404-161479169.png" alt="" loading="lazy"></p>
<h4 id="七配置前端项目">七、配置前端项目</h4>
<h6 id="1vue2中引入百度地图">1.vue2中引入百度地图</h6>
<p>百度地图博客地址:vue&百度地图绘制行进路线/路书/路线规划/线路展示_vue 百度地图路书代码-CSDN博客</p>
<p>signalr博客地址:vue +signalR - 飞天猪皮怪 - 博客园 (cnblogs.com)</p>
<p>自行配置这里就不教了</p>
<h6 id="2各位大佬我代码直接奉上就不做讲解了粘过去就能用觉得移动图片丑的联系我更换qq2362933015">2.各位大佬我代码直接奉上,就不做讲解了(粘过去就能用)，觉得移动图片丑的联系我更换QQ:2362933015</h6>
<p>记得改signalR广播地址和标识改成自己的</p>
<pre><code class="language-vue">npm install vue-baidu-map --save //下载百度地图依赖包
npm install @aspnet/signalr //下载signalr依赖包
</code></pre>
<pre><code class="language-vue"><template>
<div>
<baidu-map
class="map"
:scroll-wheel-zoom="true"
:center="{ lng: 116.404, lat: 39.915 }"
:zoom="15"
>
<bm-marker
:position="{ lng: lng, lat: lat }"
:dragging="true"
animation="BMAP_ANIMATION_DROP"
:icon="{
url: 'https://i.postimg.cc/BQpNQLd9/JVOG-OY-6-J7-M3-ZXU-IX6-7.gif',
size: { width: 300, height: 157 },
}"
></bm-marker>
</baidu-map>
</div>
</template>
<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import BmMarker from "vue-baidu-map/components/overlays/Marker.vue";
import * as signalR from "@aspnet/signalr";
export default {
computed: {},
components: {
BmMarker,
BaiduMap,
},
data() {
return {
lng: "", //经度
lat: "", //纬度
connection: "", //signalr连接
messages: [], //返回消息
play: false,
path: [],
};
},
methods: {},
created: function () {
let thisVue = this;
this.connection = new signalR.HubConnectionBuilder()
.withUrl("http://localhost:44382/Chat", {
//这里的地址要输入自己的signalR广播地址
skipNegotiation: true,
transport: signalR.HttpTransportType.WebSockets,
})
.configureLogging(signalR.LogLevel.Information)
.build();
//这里的ReceiveLog改成自己的广播地址标识
this.connection.on("ReceiveLog", function (user, message) {
thisVue.messages.push({ user, message });
//经度
thisVue.lng = user;
//纬度
thisVue.lat = message;
console.log(thisVue.lng, thisVue.lat);
});
this.connection.start();
},
};
</script>
<style scoped>
.map {
height: 800px;
width: 100%;
}
</style>
</code></pre><br><br>
来源：https://www.cnblogs.com/Iflifecouldctrlz/p/17806518.html
頁:
[1]