1. ASP.NET
Empty MVC ===> check MVC ===>No Authentication
2.Install all of the listed nuGet packages by using Package manager
console
Install-Package
Microsoft.AspNet.SignalR
Install-Package AngularJS.Core
Install-Package EntityFramework
Rebuild the application
3.Root===>Startup(Owin Startup Class)
public void Configuration(IAppBuilder app)
public void Configuration(IAppBuilder app)
{
app.MapSignalR();
}
4. Models===>ChatMessage(class)
4. Models===>ChatMessage(class)
public class ChatMessage
{
public int ID { get; set; }
public string UserName
{ get; set; }
public string Message
{ get; set; }
}
Rebuild
the application
5. Models===> ChatContext(class)
5. Models===> ChatContext(class)
using System.Data.Entity;
using System.Data.Entity.ModelConfiguration.Conventions;
namespace MyExamChatApp.Models
{
public class ChatContext: DbContext
{
public ChatContext() : base("DbCon")
{
}
public DbSet<ChatMessage> ChatMessages { get; set; }
protected override void
OnModelCreating(DbModelBuilder modelBuilder)
{
modelBuilder.Conventions.Remove<PluralizingTableNameConvention>();
}
}
}
6. Root===> web.config
</configSections>
<connectionStrings>
<addname="DbCon"
connectionString="
Data Source=(LocalDb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\MyChatDatabase.mdf;Initial Catalog=MyChatDatabase;Integrated Security=True" providerName="System.Data.SqlClient" />
connectionString="
Data Source=(LocalDb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\MyChatDatabase.mdf;Initial Catalog=MyChatDatabase;Integrated Security=True" providerName="System.Data.SqlClient" />
</connectionStrings>
<appSettings>
7. Root===> ChatHub(SignalR
Hub class)
using MyExamChatApp.Models;
using MyExamChatApp.Models;
namespace MyExamChatApp
{
public class ChatHub : Hub
{
public void SendMessage(string name, string message)
{
ChatMessage obj = new ChatMessage();
obj.UserName = name;
obj.Message = message;
ChatContext db = new ChatContext();
db.ChatMessages.Add(obj);
db.SaveChanges();
Clients.All.broadcastMessage(name,
message);
}
}
}
8. Scripts===>chat.js
/// <reference path="angular.min.js" />
/// <reference path="jquery.signalr-2.4.1.min.js" />
(function () {
var app = angular.module('chat-app', []);
app.controller('ChatContoller', function ($scope) {
$scope.name = 'Foysal';
$scope.message = '';
$scope.messages = [];
$scope.chatHub = null;
$scope.chatHub = $.connection.chatHub;
$.connection.hub.start();
$scope.chatHub.client.broadcastMessage
= function (name, message) {
var newMessage = name + ' says ' + ' : ' + message;
$scope.messages.push(newMessage);
$scope.$apply();
};
$scope.newMessage = function () {
$scope.chatHub.server.sendMessage($scope.name, $scope.message);
$scope.message = '';
}
})
}());
9. Root===> Chat.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.pageContent {
padding: 50px;
}
</style>
</head>
<body ng-app="chat-app">
<div class="pageContent" ng-controller="ChatContoller">
<h1>My Chat
Application</h1>
<table>
<tr>
<td>Name</td>
<td><input type="text" ng-model="name" /></td>
</tr>
<tr>
<td>Message</td>
<td><input type="text" ng-model="message" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Send" ng-click="newMessage()" /></td>
</tr>
<tr>
<td></td>
<td>
<ul>
<li ng-repeat="chat in messages">
<span ng-bind="chat"></span>
</li>
</ul>
</td>
</tr>
</table>
</div>
<script src="Scripts/jquery-1.6.4.min.js"></script>
<script src="Scripts/jquery.signalR-2.4.1.min.js"></script>
<script src="signalr/hubs"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/chat.js"></script>
</body>
</html>
public
string Message { get; set; }
public string ConnectionID { get; set; }
obj.Message
= message;
obj.ConnectionID
= Context.ConnectionId;
Enable-Migrations, Add-Migration, Update-Database
Enable-Migrations, Add-Migration, Update-Database
0 comments:
একটি মন্তব্য পোস্ট করুন