这是一个旨在简单的基于多用户网络的聊天系统的演示和示例应用程序。
它提供持久的组聊天,用户到用户私人聊天,用户列表,空闲(远离键盘)检测以及其他几个功能。
它建立在几种Azure Technologies上,包括: Web PubSub,静态Web应用程序和表存储
??笔记。这是作为一个个人项目而创建的,是为了帮助学习有趣的东西而创建的。该代码带有您从这样的项目中期望的所有警告。
目标:
用例和关键功能:


这是最终用户通过浏览器使用的主要Web前端。
它的来源是在客户端/中找到的,由静态独立的ES6 JS应用程序组成,不需要捆绑或node.js。它是使用vue.js作为辅助框架编写的,而布尔玛则是CSS框架。
一些注释:
client/js/app.js展示了如何使用此方法创建使用子组件的vue.js应用程序。大多数客户逻辑都在这里。client/js/components/chat.js是一个vue.js组件,用于托管应用程序中的每个聊天选项卡.auth/端点用于签署用户并获取其用户详细信息,例如用户IDERID。这是往返Azure Web Pubsub的后端,处理Websocket事件,并为某些操作提供REST API。
它的来源可在API/中找到,并由Node.js Azure函数应用程序组成。它连接到Azure Table Storage,以持续群体聊天和用户数据(由于简单而便宜,因此选择了表存储)。这不是在独立的Azure函数应用中托管的
有四个HTTP功能全部从默认/api/ PATH提供
eventHandler从Azure Web PubSub服务发送的“上游”事件的Webhook接收器包含大多数应用程序逻辑。客户不是直接调用的,只有Azure WebPub子。getToken由客户打电话给访问令牌和URL,以通过Websocket连接到Azure Web PubSub服务。必须在URL查询中使用userID调用,例如get /api/getToken?userId={user}getUsers返回用户签名的列表,请注意此功能的路由是/api/usersgetChats返回活动组聊天列表,请注意此功能的路由是/api/chats状态由state.js处理。该模块可以与Azure表进行所有交互作用,并提供相对透明的接口,因此可以将不同的存储后端交换。
通过Azure Web Pubsub和事件处理程序,客户端和服务器之间有两种方式消息流。
使用JSON.WEBPUBSUB.AZURE.V1子协议而不是基本的Websockets,这提供了许多功能:可以将用户添加到组中,客户端可以发送自定义事件(使用type: event ),也可以直接发送消息给其他客户端。无需通过服务器即可(使用type: sendToGroup )
笔记:
事件和聊天是使用json.webpubsub.azure.v1子协议发送的
从客户端发送的聊天消息使用sendToGroup和带有三个字段message的自定义JSON有效负载, fromUserId和fromUserName ,这些消息由Azure Web Pubsub传递给客户端,从未通知服务器:
{
type : 's endToGroup ',
group : < chatId > ,
dataType : 'j son ',
data : {
message : < message text > ,
fromUserId : < userId > ,
fromUserName : < userName > ,
},
}本地为后端服务器的事件是通过event类型通过相同的子协议和应用程序特定子类型的相同子协议发送的WebSocket消息,例如
{
type : 'e vent ',
event : 'j oinChat ',
dataType : 't ext ',
data : < chatId > ,
}事件的类型是:
后端API eventHandler功能都为每个用户事件中的每个案例以及连接和断开系统事件的处理程序。
从服务器发送的消息具有自定义CHATR应用程序特定的有效负载,如下:
{
chatEvent : < eventType > ,
data : < JSON object type dependant >
} eventType是:
client/js/app.js中的客户端代码会在客户端收到的情况下处理这些消息,并做出相应的反应。
The plan of this project was to use Azure Web PubSub and Azure Static Web Apps , and to host the server side component as a set of serverless functions in the Static Web Apps API support (which is in fact Azure Functions under the hood).之所以选择Azure静态Web应用程序,是因为它对我想利用的无编码和无配置用户登录和auth具有惊人的支持。
关于这种方法的一些评论:
webPubSubConnection binding. For sending messages back to Web PubSub, the server SDK can simply be used within the function code rather than using the webPubSub output binding.State in Azure Tables consists of two tables (collections) named chats and users
As each chat contains nested objects inside the members field, each chat is stored as a JSON string in a field called data . partitionKey不使用并进行硬编码为字符串“ chatr”。数据对象中的Rowkey和ID字段相同。
聊天数据实体的示例
{
"id" : " eab4b030-1a3d-499a-bd89-191578395910 " ,
"name" : " This is a group chat " ,
"members" : {
"0987654321" : {
"userId" : " 0987654321 " ,
"userName" : " Another Guy "
},
"1234567890" : {
"userId" : " 1234567890 " ,
"userName" : " Ben "
}
},
"owner" : " 1234567890 "
}用户作为实体存储在下面描述的字段(列)。由于没有嵌套字段,因此无需用作JSON字符串编码。同样,partitionKey不使用并进行硬编码为字符串“ chatr”。
userId field returned from Static Web Apps auth endpointtwitter , aad or github请参阅makefile
$ make
help This help message
lint ? Lint & format, will not fix but sets exit code on error
lint-fix Lint & format, will try to fix errors and modify code
run ? Run server locally using Static Web Apps CLI
clean ? Clean up project
deploy Deploy everything to Azure using Bicep
tunnel ? Start loophole tunnel to expose localhost
由于组件的数量及其之间的配置,部署略有复杂。 The makefile target deploy should deploy everything for you in a single step using Bicep templates found in the deploy/ folder
有关详细信息和说明
这是可能的,但需要一点努力,因为Azure Web Pubsub服务需要在您的位置机器上调用HTTP端点,因此已经使用了隧道。
在本地运行时,使用了静态Web应用程序CLI,这为我们提供了伪造的用户身份验证端点。
这些步骤的摘要是:
api/local.settings.sample.json to api/local.settings.json and edit the required settings values.loophole http 7071 --hostname chatrhttps://{{hostname-of-tunnel-service}}/api/eventHandlermake runhttp://localhost:4280/index.html