【Azure Developer】App Service + PubSub +JS 实现多人版黑客帝国文字流效果图
需要描述
1）实现黑客帝国文字流效果图，JS功能
2）部署在云中，让大家都可以访问，App Service实现
3）大家都能发送消息，并显示在文字流中，PubSub（websocket）实现
终极效果显示：
执行步骤
1）在 Azure 中创建 App Service 服务，参考官方文档：快速入门：部署 ASP.NET Web 应用
Azure门户中创建App Service的动画演示：
2）在 Azure 中创建 PubSub 服务，参考官方文档：快速入门：从 Azure 门户创建 Web PubSub 实例
Azure门户中创建Web PubSub的动画演示：
3）使用Visual Studio 2022创建一个.NET 6.0 Web项目，参考PubSub的文档来创建一个服务端来托管 /negotiate API和Web 页面，参考示例：教程：使用子协议在 WebSocket 客户端之间发布和订阅消息
Program.cs文件内容为：
string ConnectionString = "<Web PubSub Access Key>" 获取的办法见第二步创建的PubSub服务的Key页面 --> Connection String
using Azure.Messaging.WebPubSub;
using Microsoft.Extensions.Azure; string ConnectionString = "<Web PubSub Access Key>"; // Add WebPubSub Service
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddAzureClients(builder =>
{
builder.AddWebPubSubServiceClient(ConnectionString, "stream");
}); var app = builder.Build(); app.UseStaticFiles(); app.UseRouting(); //实现生产客户端WebSocket SAS URL
app.UseEndpoints(endpoints =>
{
endpoints.MapGet("/negotiate/{userid}", async (string userid, HttpContext context) =>
{
var service = context.RequestServices.GetRequiredService<WebPubSubServiceClient>();
var response = new
{
url = service.GetClientAccessUri(userId: userid, roles: new string[] { "webpubsub.sendToGroup.stream", "webpubsub.joinLeaveGroup.stream" }).AbsoluteUri
};
await context.Response.WriteAsJsonAsync(response);
});
}); app.MapGet("/", () => "/index.html"); app.Run();
前端 wwwroot/stream.html 内容为：
<html>
<style>
html,
body {
margin: 0;
padding: 0;
background-color: rgb(0, 0, 0);
} #divList {
width: 98%;
height: 79%;
border: solid 1px rgb(0, 15, 0);
;
margin: 0px auto;
overflow: hidden;
position: relative;
} .divText {
position: absolute;
} .divText span {
display: block;
font-weight: bold;
font-family: Courier New;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <body> <br>
<h2 style="text-align:center; color:white;">STREAM BOARDCAST (<span id="spanCount">0</span>)</h2>
<div id="divList">
</div>
<h3 style="text-align:left; color:grey;">Send</h3>
<div style=" margin: 5px 15px;">
<input id="inputmessage" style="text-align:left; color:green; width: 86%; height: 55px; font-size: 40px;" onsubmit="sendmessage()"><button
style="text-align:center; color:green; width: 12%; height: 55px;font-size: 40px;" onclick="sendmessage()">Send</button>
</div>
<div style="display:none;">
<h1>Message</h1>
<div id="output"></div>
<br>
<h1>Message</h1>
<div id="outputmsg"></div>
</div>
<script>
var textarray = ["Hello Mooncake,Welcome to use PubSub", "Who are you? Put your PIN ... "];
var wsurl = "";
var wsclient;
let ackId = 0;
(async function () {
let res = await fetch('/negotiate/client_2')
let data = await res.json();
wsurl = data.url;
let ws = new WebSocket(data.url, 'json.webpubsub.azure.v1');
ws.onopen = () => {
console.log('connected');
}; let output = document.querySelector('#output');
let outputmsg = document.querySelector('#outputmsg'); ws.onmessage = event => {
let d = document.createElement('p');
d.innerText = event.data;
output.appendChild(d); let message = JSON.parse(event.data);
if (message.type === 'message' && message.group === 'stream') {
let d = document.createElement('span');
d.innerText = message.data;
textarray.push(message.data);
outputmsg.appendChild(d);
window.scrollTo(0, document.body.scrollHeight);
}
}; ws.onopen = () => {
console.log('connected');
ws.send(JSON.stringify({
type: 'joinGroup',
group: 'stream',
ackId: ++ackId
})); wsclient = ws;
};
})(); function sendmessage() { if (wsclient.readyStatue == WebSocket.OPEN) {
wsclient.send(JSON.stringify(
{
type: "sendToGroup",
group: "stream",
data: $('#inputmessage').val(),
ackId: ++ackId // ackId is optional, use ackId to make sure this action is executed
}
));
}
else {
wsclient = new WebSocket(wsurl, 'json.webpubsub.azure.v1'); wsclient.onopen = () => {
console.log('connected again');
wsclient.send(JSON.stringify({
type: "sendToGroup",
group: "stream",
data: $('#inputmessage').val(),
ackId: ++ackId
})); };
}
$('#inputmessage').focus();
} function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
} function add(message) {
var maxwdth = $('#divList').width();
var x = rand(0, maxwdth);
var html = '<div class="divText" style="left:' + x + 'px; bottom:500px;">'; var color = [];
for (var i = 1; i < message.length; i++) {
var f = i.toString(16);
color.push('0' + f + '0');
} var fontSize = rand(20, 36);
for (var i = 1; i <= message.length; i++) {
var c = message[i - 1];
html += '<span class="s' + i + '" style="color:#' + color[i - 1] + '; font-size:' + fontSize + 'px; text-shadow:0px 0px 10px #' + color[i - 1] + ';">' + c + '</span>';
}
html += '</div>';
$('#divList').append(html);
} function run() {
var x = rand(0, 100);
if (x < 100) {
var lgh = textarray.length;
if (textarray.length > x) add(textarray[x]);
else
add(textarray[x % lgh]);
}
$('#spanCount').html($('.divText').size()); $('.divText').each(function () {
var y = $(this).css('bottom');
y = parseInt(y);
y -= $(this).find('span').eq(0).height();
$(this).css('bottom', '' + y + 'px');
if (y + $(this).height() <= 0) {
$(this).remove();
return;
}
}); window.setTimeout(run, 200);
}
run(); </script>
</body> </html>
项目结构示意图：
项目创建完成后，可以在本机进行调试。正常运行后即可发布到Azure App Service上。因代码简单并且可读性强，可自行理解。
4）通过VS 2022发布到App Service中
VS 2022 通过Publish Profile 发布站点演示动画：
发布版本操作完成。
附录一：本地黑客帝国文字流效果，可自行输入即修改内容版
复制内容，直接保存在本地文件中，文件命名为 localstream.html后使用浏览器打开即可
<html>
<style>
html,
body {
margin: 0;
padding: 0;
background-color: rgb(0, 0, 0);
} #divList {
width: 98%;
height: 79%;
border: solid 1px rgb(0, 15, 0);
;
margin: 0px auto;
overflow: hidden;
position: relative;
} .divText {
position: absolute;
} .divText span {
display: block;
font-weight: bold;
font-family: Courier New;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <body> <br>
<h2 style="text-align:center; color:white;">STREAM BOARDCAST (<span id="spanCount">0</span>)</h2>
<div id="divList">
</div>
<h3 style="text-align:left; color:grey;">Send</h3>
<div style=" margin: 5px 15px;">
<input id="inputmessage" style="text-align:left; color:green; width: 86%; height: 55px; font-size: 40px;" onsubmit="sendmessage()"><button
style="text-align:center; color:green; width: 12%; height: 55px;font-size: 40px;" onclick="sendmessage()">Send</button>
</div>
<div style="display:none;">
<h1>Message</h1>
<div id="output"></div>
<br>
<h1>Message</h1>
<div id="outputmsg"></div>
</div>
<script>
var textarray = ["Hello Mooncake,Welcome to use PubSub", "Who are you? Put your PIN ... "]; function sendmessage() {
textarray.push($('#inputmessage').val());
$('#inputmessage').focus();
} function rand(min, max) {
return min + Math.round(Math.random() * (max - min));
} function add(message) {
var maxwdth = $('#divList').width();
var x = rand(0, maxwdth);
var html = '<div class="divText" style="left:' + x + 'px; bottom:500px;">'; var color = [];
for (var i = 1; i < message.length; i++) {
var f = i.toString(16);
color.push('0' + f + '0');
} var fontSize = rand(20, 36);
for (var i = 1; i <= message.length; i++) {
var c = message[i - 1];
html += '<span class="s' + i + '" style="color:#' + color[i - 1] + '; font-size:' + fontSize + 'px; text-shadow:0px 0px 10px #' + color[i - 1] + ';">' + c + '</span>';
}
html += '</div>';
$('#divList').append(html);
} function run() {
var x = rand(0, 100);
if (x < 100) {
var lgh = textarray.length;
if (textarray.length > x) add(textarray[x]);
else
add(textarray[x % lgh]);
}
$('#spanCount').html($('.divText').size()); $('.divText').each(function () {
var y = $(this).css('bottom');
y = parseInt(y);
y -= $(this).find('span').eq(0).height();
$(this).css('bottom', '' + y + 'px');
if (y + $(this).height() <= 0) {
$(this).remove();
return;
}
}); window.setTimeout(run, 200);
}
run(); </script>
</body> </html>
PS: 与PubSub版本相比，只是移除了WebSocket的相关代码
运行效果
参考资料
JS 黑客帝国文字下落效果： https://www.cnblogs.com/zjfree/p/3833592.html
教程：使用子协议在 WebSocket 客户端之间发布和订阅消息：https://docs.microsoft.com/zh-cn/azure/azure-web-pubsub/tutorial-subprotocol?tabs=csharp#using-a-subprotocol
快速入门：部署 ASP.NET Web 应用：https://docs.azure.cn/zh-cn/app-service/quickstart-dotnetcore?tabs=net60&pivots=development-environment-vs
【Azure Developer】App Service + PubSub +JS 实现多人版黑客帝国文字流效果图的更多相关文章
- 【Azure DevOps系列】使ASP.NET Core应用程序托管到Azure Web App Service
使用Azure DevOps Project设置ASP.NET项目 我们需要先在Azure面板中创建一个Azure WebApp服务,此处步骤我将省略,然后点击部署中心如下图所示: 此处我选择的是Az ...
- 【Azure 应用服务】App Service中，为Java应用配置自定义错误页面，禁用DELETE, PUT方法
问题定义 使用Azure应用服务(App Service),部署Java应用,使用Tomcat容器,如何自定义错误页面呢?同时禁用DELETE, PUT方法 解决办法 如何自定义错误页面呢?需要在 J ...
- 【应用服务 App Service】快速获取DUMP文件(App Service for Windows(.NET/.NET Core))
问题情形 当应用在Azure 应用服务App Service中运行时,有时候出现CPU,Memory很高,但是没有明显的5XX错误和异常日志,有时就是有异常但是也不能明确的指出具体的代码错误.当面临这 ...
- 【Azure 应用服务】App Service 通过配置web.config来添加请求返回的响应头(Response Header)
问题描述 在Azure App Service上部署了站点,想要在网站的响应头中加一个字段(Cache-Control),并设置为固定值(Cache-Control:no-store) 效果类似于本地 ...
- 【Azure 应用服务】NodeJS Express + MSAL 应用实现AAD集成登录并部署在App Service Linux环境中的实现步骤
问题描述 实现部署NodeJS Express应用在App Service Linux环境中,并且使用Microsoft Authentication Library(MSAL)来实现登录Azure ...
- 改善Azure App Service托管应用程序性能的几个技巧
本文介绍了几个技巧,这些技巧可以改善Azure App Service托管应用程序的性能.其中一些技巧是你现在就可以进行的配置变更, 而其他技巧则可能需要对应用程序进行一些重新设计和重构. 开发者都希 ...
- 【应用服务 App Service】解决无法从Azure门户SSH登录问题
问题描述 中国区的Azure App Service(应用服务)已经支持创建Docker并选择Linux环境.在使用中,我们可以继续通过kudu站点的方式登录查看站点的一些日志及部署文件.它的登录方式 ...
- 【Azure 应用服务】App Service与APIM同时集成到同一个虚拟网络后，如何通过内网访问内部VNET的APIM呢？
问题描述 App Service访问的APIM已配置内部虚拟网络(Internal VNet)并拥有内网IP地址.App Service与APIM都在相同的虚拟网络(VNET)中.App Servic ...
- 【Azure 应用服务】App Service 在使用GIt本地部署，上传代码的路径为/home/site/repository，而不是站点的根目录/home/site/wwwroot。 这个是因为什么？
问题描述 App Service 在使用GIt本地部署,上传代码的路径为/home/site/repository,而不是站点的根目录/home/site/wwwroot. 这个是因为什么? 并且通过 ...
随机推荐
- python实战----Todo清单续写
添加分页功能 第一步:是对视图函数的改写,通过查询数据库数据,进行分页显示 # 修改清单显示的视图函数 @app.route('/list/') @app.route('/list/<int:p ...
- 关于recyclerview其item数据重复问题
查找方法(query)的list只定义对象,不实例化,等到要添加的时候,再new一个新的对象出来. 千万不要如下图这样,否则item显示出来的永远是最新数据. (这个bug找了两天,还是基本功不扎实, ...
- 【uniapp 开发】日期工具类 -- DateUtil
日期格式转毫秒值 var time = '2019-08-08 12:09:34'; var time222 = time.replace("-", "/"). ...
- Hadoop本地编写的jar包放到集群执行时报错处理
错误描述: 020-03-24 22:45:23,204 WARN org.apache.hadoop.yarn.server.nodemanager.DefaultContainerExecutor ...
- 使用docker安装centos6.10镜像并安装新版gcc
使用docker安装centos6.10镜像并安装新版gcc 环境:Linux Ubuntu 16.04.7 LTS 目录 使用docker安装centos6.10镜像并安装新版gcc 使用docke ...
- pip——重新安装
原因 没有用管理员的权限安装.导致失败. 并且pip还被卸载了. 使用环境 win10 重新安装pip python -m ensurepip 更新pip 管理员打开cmd python -m pip ...
- k8s pod 在迁移zookeeper时出现的问题
一次迁移中出现的问题,因为要搬迁机房,集群中的节点服务器分布在两个机房,通过专线打通了,现在需要整体都迁移到其中一个机房,所以pod要进行迁移,机器资源也比较紧张,在迁移中zookeeper迁移出现问 ...
- 帝国CMS怎样删除清空数据库记录？
我用的帝国CMS,删除已经发表的文章和栏目后,后面新发的栏目和文章ID并不会重新从1开始,而是接着已经删除的文章和栏目ID,那么,怎样让后面发的文章和栏目ID重新从1开始呢? 首先,做任何重要修改前先 ...
- ZABBIX Proxy容器启动的配置过程
ZABBIX Proxy容器启动的配置过程 环境介绍 版本 zabbix6 zabbix server 与 zabbix proxy 非同一台主机,zabbix proxy为主动方式提交给server ...
- 伪元素 Before & Aster
1. html 结构 <label class="is-required" for="name">姓名</label> <inpu ...