\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u0425\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441\u0432\u043e\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f ASP.Net Core \u0438 Angular 2 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c SignalR.<\/p>\n
\u0411\u0443\u0434\u0443\u0447\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u043e\u043c 1\u0421, \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0440\u0435\u0448\u0430\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430 1\u0421 \u0440\u0435\u0448\u0438\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e \u0438\u043b\u0438 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e. \u041e\u0447\u0435\u043d\u044c \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0437\u043d\u0430\u043d\u0438\u0435 .Net. \u041d\u043e \u0432\u043e\u0442, \u0447\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0430\u0439\u0442\u043e\u0432, \u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043c\u043d\u043e\u0433\u043e \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u0435\u0439 (JavaScript, CSS, JQuery \u0438\u0442\u0434), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u0441\u0442\u0440\u043e \u0437\u0430\u0431\u044b\u0432\u0430\u044e\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u0438\u043c\u0438 \u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f.<\/p>\n
Angular 2 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u0438.
\u0422\u0430\u043a TypeScript \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u043b\u0438\u0436\u0435 \u043a C# (\u0438 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0420\u0443\u0441\u043b\u0438\u0448), \u0430 \u0441 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u043c\u0438 \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0437\u043d\u0430\u044f Razor \u0438 Xaml.<\/p>\n
\u0413\u043b\u0430\u0432\u043d\u043e\u0435, \u0447\u0442\u043e \u0432\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u0435 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 WPF. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0435\u0441\u0442\u044c \u043a\u0443\u0447\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432.<\/p>\n
\u0425\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0442\u0430\u043a\u0438\u043c\u0438 \u0436\u0435 \u0431\u0435\u0434\u043e\u043b\u0430\u0433\u0430\u043c\u0438 \u043a\u0430\u043a \u044f, \u0438\u043b\u0438 \u043a\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 Angular 2, ASP.Net Core, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u043d\u0430 \u043f\u043e\u0438\u0441\u043a\u0438 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u0434\u043b\u044f \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f.<\/p>\n
\u0414\u043b\u044f \u0442\u0440\u0435\u043d\u0438\u0440\u043e\u0432\u043a\u0438 \u043d\u0430 \u043a\u043e\u0448\u043a\u0430\u0445 \u0431\u044b\u043b \u0432\u044b\u0431\u0440\u0430\u043d \u043c\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 1C Messenger \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439, \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u043e\u0431\u043c\u0435\u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043c\u0435\u0436\u0434\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438 1\u0421, \u0432\u044d\u0431 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u0430 \u043b\u044f Skype, WhatsApp \u0418 \u0442\u0430\u043a \u043d\u0430\u0447\u043d\u0435\u043c. \u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f <\/a> \u0418 \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c ts \u0438 html \u0444\u0430\u0439\u043b\u044b \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u0438 \u0432\u0438\u0434\u0435\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0417\u0430 \u044d\u0442\u043e \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043a\u043b\u0430\u0441\u0441\u044b \u0438\u0437 Microsoft.AspNetCore.SpaServices.dll \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043e\u0442 PrimeNG \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u0434\u0430. \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e \u043d\u0430 \u043d\u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u0443\u0447\u0438\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438 \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435.<\/p>\n \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0445\u0430\u0431\u0430 SignalR metanit.com\/sharp\/mvc5\/16.1.php<\/a><\/p>\n \u0423\u0434\u043e\u0431\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0445\u0430\u0431\u044b. <\/p>\n \u0422\u043e \u043f\u0440\u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u0442\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0431\u0443\u0434\u0443 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u0435\u0442\u043e\u0434 sendEcho, \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e \u044d\u0442\u043e\u0442 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0443\u0434\u043e\u0431\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 .Net \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438, \u0438 \u043c\u043e\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043a\u043e\u0434\u043e\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440 \u0434\u043b\u044f TypeScript \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0435\u0440\u0432\u0438\u0441\u0430.<\/p>\n \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043a\u043b\u0438\u0435\u043d\u0442\u0430. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u043d\u0430\u043c \u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441 \u0436\u0438\u0432\u044b\u043c \u043d\u0430 \u043f\u0440\u043e\u0442\u044f\u0436\u0435\u043d\u0438\u0438 \u0432\u0441\u0435\u0439 \u0436\u0438\u0437\u043d\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435 \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0435, \u043f\u043e\u0441\u043b\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n <\/div>\n<\/div>\n \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u0435\u0440\u0435\u0439\u0434\u0435\u043c \u043a \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/p>\n \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044e \u0438\u0437 \u0421\u0435\u0440\u0432\u0438\u0441\u0430 \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0442\u043e\u0434\u044b \u0441\u0435\u0440\u0432\u0438\u0441\u0430. \u0423 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0444\u043e\u0440\u043c\u0430 \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 textarea \u0441 \u043f\u0440\u0438\u0432\u044f\u0437\u043a\u043e\u0439 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 Message, dropdown \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u0445, checkbox \u0441 \u043f\u0440\u0438\u044f\u0437\u043a\u043e\u0439 selectUsername \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043f\u043e \u0438\u043c\u0435\u043d\u0438.<\/p>\n \u0418 \u0435\u0441\u0442\u044c \u0431\u043b\u043e\u043a \u0441 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u043c\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u043c\u0438 allMessages. <\/p>\n \u0421\u0430\u043c Html \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0441\u044f \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u044b\u043c, \u0430 \u0432\u0435\u0441\u044c \u043a\u043e\u0434 \u043d\u0430 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u0438\u044f\u0442\u043d\u043e\u043c TypeScript.<\/p>\n \u041e\u0431\u0440\u0430\u0449\u0443 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u0435 self \u0432\u043d\u0443\u0442\u0440\u0438 \u0437\u0430\u043c\u044b\u043a\u0430\u043d\u0438\u044f. \u042d\u0442\u043e \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 JS. \u0438 \u0437\u0430\u043c\u0435\u043d\u044f\u0435\u0442 <\/p>\n \u043d\u0430 <\/p>\n \u041d\u043e \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u0443\u0434\u043e\u0431\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u043c\u0435\u0436\u0443\u0442\u043e\u0447\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <\/p>\n \u0418\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0417\u0434\u0435\u0441\u044c<\/a> \u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u0425\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441\u0432\u043e\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f ASP.Net Core \u0438 Angular 2 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c SignalR.<\/p>\n \u0411\u0443\u0434\u0443\u0447\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0441\u0442\u043e\u043c 1\u0421, \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0440\u0435\u0448\u0430\u0442\u044c \u0437\u0430\u0434\u0430\u0447\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430 1\u0421 \u0440\u0435\u0448\u0438\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e \u0438\u043b\u0438 \u043d\u0435\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e. \u041e\u0447\u0435\u043d\u044c \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u0437\u043d\u0430\u043d\u0438\u0435 .Net. \u041d\u043e \u0432\u043e\u0442, \u0447\u0442\u043e \u043a\u0430\u0441\u0430\u0435\u0442\u0441\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u0430\u0439\u0442\u043e\u0432, \u0442\u043e \u0437\u0434\u0435\u0441\u044c \u043c\u043d\u043e\u0433\u043e \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u0435\u0439 (JavaScript, CSS, JQuery \u0438\u0442\u0434), \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u0441\u0442\u0440\u043e \u0437\u0430\u0431\u044b\u0432\u0430\u044e\u0442\u0441\u044f, \u0435\u0441\u043b\u0438 \u0438\u043c\u0438 \u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f.<\/p>\n Angular 2 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u043e\u0439 \u0447\u0430\u0441\u0442\u0438. \u0413\u043b\u0430\u0432\u043d\u043e\u0435, \u0447\u0442\u043e \u0432\u044b \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442\u0435 \u0441 \u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u043f\u043e \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0438 \u0441 WPF. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0435\u0441\u0442\u044c \u043a\u0443\u0447\u0430 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u043e\u0432.<\/p>\n \u0425\u043e\u0447\u0443 \u043f\u043e\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0442\u0430\u043a\u0438\u043c\u0438 \u0436\u0435 \u0431\u0435\u0434\u043e\u043b\u0430\u0433\u0430\u043c\u0438 \u043a\u0430\u043a \u044f, \u0438\u043b\u0438 \u043a\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u0435 Angular 2, ASP.Net Core, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u043b \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u043d\u0430 \u043f\u043e\u0438\u0441\u043a\u0438 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u0434\u043b\u044f \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f.<\/p>\n \u0414\u043b\u044f \u0442\u0440\u0435\u043d\u0438\u0440\u043e\u0432\u043a\u0438 \u043d\u0430 \u043a\u043e\u0448\u043a\u0430\u0445 \u0431\u044b\u043b \u0432\u044b\u0431\u0440\u0430\u043d \u043c\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 1C Messenger \u0434\u043b\u044f \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439, \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u043e\u0431\u043c\u0435\u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u043c\u0435\u0436\u0434\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c\u0438 1\u0421, \u0432\u044d\u0431 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u043c\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u0430 \u043b\u044f Skype, WhatsApp \u0418 \u0442\u0430\u043a \u043d\u0430\u0447\u043d\u0435\u043c. \u0414\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f
<\/a>
\u041f\u043e\u043a\u0430 \u043d\u0435 \u0432\u044b\u0448\u0435\u043b. Net Core 1.2 \u0438 NetStandard 2, \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0434\u043b\u044f SignalR \u043f\u043e\u0434 .Net Core<\/p>\n
1. ASP.NET Core + Angular 2 \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f Visual Studio <\/a>
2. \u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043f\u043e ASP.NET Core
<\/a>
3. \u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043f\u043e Angular 2
<\/a>
4. \u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043f\u043e TypeScript
<\/a>
5. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043e\u0442 PrimeNG
<\/a>
6. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b Bootstrap
<\/a><\/p>\n
ASP.NET Core + Angular 2 \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f Visual Studio \u044d\u0442\u043e \u0447\u0443\u0434\u0435\u0441\u043d\u044b\u0439 \u0448\u0430\u0431\u043b\u043e\u043d, \u043a\u043e\u0442\u043e\u044b\u0439 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442 \u0432\u0430\u0448\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f ASP.Net Core \u0438 Angular 2 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u044f \u043a\u0443\u0447\u0443 json \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u043d\u0430\u0441\u0442\u0430\u0438\u0432\u0430\u044f \u0434\u043b\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f webpack.
\u0414\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c Angular2 c Visual Studio 2015<\/a><\/p>\n
WebpackDevMiddlewareOptions \u0438 SpaRouteExtensions.
\u0414\u0430 \u0434\u0430! \u041e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u041f\u0440\u0438 \u044d\u0442\u043e\u043c Ts \u0444\u0430\u0439\u043b\u044b \u043b\u0435\u0436\u0430\u0442 \u0432 \u043f\u0430\u043f\u043a\u0435 (\u043d\u0435\u0442 \u0434\u043e\u043c\u0435\u043d\u0430)<\/p>\npublic interface IHelloHub { \/\/ \u041d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043a\u0430\u043a \u043d\u0430\u0437\u0432\u0430\u043d\u044b \u043c\u0435\u0442\u043e\u0434\u044b \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \/\/\u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f Camel \u043d\u043e\u0442\u0430\u0446\u0438\u044f \/\/ \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0441 \u043f\u0440\u043e\u043f\u0438\u0441\u043d\u044b\u0445 \u0431\u0443\u043a\u0432 Task sendEcho(string str, string \u041a\u043e\u043c\u0443); \/\/ \u0421\u043e\u0431\u044b\u0442\u0438\u044f \u041a\u043b\u0438\u0435\u043d\u0442\u0443 \/\/ \u041d\u0443\u0436\u043d\u043e \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c, \u0447\u0442\u043e Xamarin \u043f\u043e\u043a\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0443 \u0442\u043e\u043b\u044c\u043a\u043e 4 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 Task addMessage(string Name, string str, string ConnectionId); } <\/code><\/pre>\n
\u041d\u043e \u0438 Clients.Others.addMessage \u0438 Clients.Client(\u041a\u043e\u043c\u0443).addMessage<\/p>\n public class HelloHub : Hub<IHelloHub> { \/\/ \u041e\u0442\u043f\u0440\u0430\u0432\u0438\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0432\u0441\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c, \u043a\u0440\u043e\u043c\u0435 \u043e\u0442\u0441\u044b\u043b\u0430\u044e\u0449\u0435\u0433\u043e \u0435\u0441\u043b\u0438 \u041a\u043e\u043c\u0443 \u043f\u0443\u0441\u0442\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430 \/\/ \u0415\u0441\u043b\u0438 \u041a\u043e\u043c\u0443 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d, \u0442\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u043c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0438 ID \u041a\u043e\u043c\u0443 public async Task sendEcho(string str, string \u041a\u043e\u043c\u0443) { var user = new User(); if (!\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0417\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d(user)) return; if (string.IsNullOrWhiteSpace(\u041a\u043e\u043c\u0443)) await Clients.Others.addMessage(user.Name, str, user.ConnectionId); else await Clients.Client(\u041a\u043e\u043c\u0443).addMessage(user.Name, str, user.ConnectionId); } } <\/code><\/pre>\n
\u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043e\u0431\u0449\u0438\u0439 \u0441\u0435\u0440\u0432\u0438\u0441 \u041e\u0434\u0438\u043d \u0441\u0435\u0440\u0432\u0438\u0441 \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432<\/a> <\/p>\n\/\/\/ <reference path="..\/models\/ForHelloHub.ts"\/> import { IHelloHub, DataInfo, ChatMessage, User} from "..\/models\/ForHelloHub"; import { EventEmitter } from '@angular\/core'; import { SelectItem } from 'primeng\/primeng'; declare var $: any; export class HelloHub implements IHelloHub { \/\/ \u0412\u0441\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f public allMessages: ChatMessage[]; \/\/ \u0424\u043b\u0430\u0433 \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043a \u0425\u0430\u0431\u0443 public connectionExists: Boolean; \/\/ \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043b \u0438\u043c\u044f public isRegistered: Boolean; \/\/ $.connection.helloHub.server private server: any; \/\/ $.connection.helloHub.client private client: any; \/\/ $.connection.helloHub private chat: any; \/\/ ID \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f private userId: string; \/\/ \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 public Users: SelectItem[]; \/\/ \u0421\u043e\u0431\u044b\u0442\u0438\u0435 \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 public onChangeUser: EventEmitter<void> = new EventEmitter<void>(); \/\/ \u0421\u043e\u0431\u044b\u0442\u0438\u0435 \u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f public onAddMessage: EventEmitter<void> = new EventEmitter<void>(); \/\/ \u0421\u043e\u0431\u044b\u0442\u0438\u0435 \u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043a \u0445\u0430\u0431\u0443 public onConnected: EventEmitter<void> = new EventEmitter<void>(); \/\/ \u0421\u043e\u0431\u044b\u0442\u0438\u0435 \u043e \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0438\u043c\u0435\u043d\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. public onRegistered: EventEmitter<void> = new EventEmitter<void>(); constructor() { this.userId = ""; \/\/ \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u0441 \u0438\u043c\u0435\u043d\u0435\u043c "\u0412\u0441\u0435\u043c". \u041f\u0440\u0438 \u0435\u0433\u043e \u0432\u044b\u0431\u043e\u0440\u0435 \/\/ \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u044b \u0432\u0441\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c, \u043a\u0440\u043e\u043c\u0435 \u0442\u0435\u043a\u0443\u0449\u0435\u0433\u043e this.Users = [{ label: "\u0412\u0441\u0435\u043c", value: ""}]; this.connectionExists = false; this.isRegistered = false; this.chat = $.connection.helloHub; this.server = this.chat.server; this.client = this.chat.client; \/\/ \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 this.registerOnServerEvents(); this.allMessages = new Array<ChatMessage>(); \/\/ \u041f\u043e\u0434\u0441\u043e\u0435\u0434\u0438\u043d\u0438\u043c\u0441\u044f \u043a \u0425\u0430\u0431\u0443 this.startConnection(); } \/\/ \u0421\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u043f\u043e \u0438\u043c\u0435\u043d\u0438. \u0412\u0441\u0435\u043c \u0434\u043e\u043b\u0436\u043d\u0430 \u0431\u044b\u0442\u044c \u043f\u0435\u0440\u0432\u043e\u0439 private sortUsers() { this.Users.sort((a, b: SelectItem) => { if (a.label == "\u0412\u0441\u0435\u043c") return -1; return a.label.toLocaleUpperCase().localeCompare(b.label.toLocaleUpperCase()); }); } \/\/\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c \u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 private registerOnServerEvents(): void { let self = this; \/\/ \u0421\u043e\u0431\u044b\u0442\u0438\u0435 \u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \/\/Task addMessage(string Name, string str, string ConnectionId); this.client.addMessage = (name: string, message: string, ConnectionId: string) => { \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u043d\u0430 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 console.log('addMessage ' + message); self.addMessage(name, message,ConnectionId); }; \/\/ \u0421\u043e\u0431\u044b\u0442\u0438\u0435 \u043e \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \/\/Task onConnected(string id, string userName, List < User > users); this.client.onConnected = function (id: string, userName: string, allUsers: User[]) { self.isRegistered = true; self.userId = id; \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 for (let user of allUsers) { self.addUser(user.ConnectionId, user.Name); } self.sortUsers(); \/\/ \u0421\u043e\u043e\u0431\u0449\u0438\u043c \u043e\u0431 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0438 \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 self.onRegistered.emit(); }; \/\/Task onNewUserConnected(string id, string userName); \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f this.client.onNewUserConnected = (id: string, name: string) => { self.addUser(id, name); }; \/\/Task onUserDisconnected(string id, string Name); \/\/ \u0423\u0434\u0430\u043b\u044f\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f this.client.onUserDisconnected = (id: string, userName: string) => { let idx = self.Users.findIndex((cur: SelectItem) => { return cur.value == id; }); if (idx != -1) { return self.Users.splice(idx, 1); }; } } \/\/ \u041d\u0430\u0439\u0434\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043f\u043e id \/\/ \u0415\u0441\u043b\u0438 \u043d\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u043c \u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0435\u043c \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f findUser(userName:string,id: string): SelectItem { let idx = this.Users.findIndex((cur: SelectItem) => { return cur.value == id; }); if (idx != -1) { return this.Users[idx]; } return { label: userName, value:id } } \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 addMessage(name: string, message: string, ConnectionId: string): void { this.allMessages.splice(0, 0, new ChatMessage(message, new Date, this.findUser(name, ConnectionId))); this.onAddMessage.emit(); } \/\/ \u0414\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u043e\u0442\u0441\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043f\u043e \u043d\u0430\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u0438\u044e addUser(id: string, name: string): void { if (this.userId === "") return; if (this.userId !== id) { let usr = { label: name, value: id }; this.Users.push(usr); this.sortUsers(); this.onChangeUser.emit(); } } \/\/ \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c\u0441\u044f \u043a \u0425\u0430\u0431\u0443 private startConnection(): void { let self = this; $.connection.hub.start().done((data: any) => { console.log('startConnection ' + data); self.connectionExists = true; self.onConnected.emit(); console.log('Send onConnected'); }).fail((error) => { console.log('Could not connect ' + error); }); } \/\/======= \u043c\u0435\u0442\u043e\u0434\u044b \u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \/\/ \u041e\u0442\u043e\u0448\u043b\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0412\u0441\u0435\u043c \u0438\u043b\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e sendEcho(str: string, \u041a\u043e\u043c\u0443: string) { this.server.sendEcho(str, \u041a\u043e\u043c\u0443); } \/\/ \u041e\u0442\u043e\u0448\u043b\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u043f\u043e \u0438\u043c\u0435\u043d\u0438 sendByName(message: string, \u041a\u043e\u043c\u0443: string) { this.server.sendByName(message, \u041a\u043e\u043c\u0443); } \/\/ \u0417\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u043f\u043e \u0438\u043c\u0435\u043d\u0438 connect(userName: string) { this.server.connect(userName); } } <\/code><\/pre>\nimport { Component, NgZone, ViewChild, AfterViewInit } from '@angular\/core'; import { HelloHub } from '..\/services\/HelloHubServise'; import { ChatMessage } from '..\/models\/ForHelloHub'; import { SelectItem} from 'primeng\/primeng'; import { Dropdown2 } from '..\/Dropdown\/Dropdown'; @Component({ selector: 'p-HelloHubComponent', template: require('.\/SignalRHelloHub.html') }) export class HelloHubComponent { @ViewChild(Dropdown2) public dropdown: Dropdown2; public allMessages: ChatMessage[]; public Users: SelectItem[]; public selectedUser: string; public Message: string; public selectUsername: boolean=false; constructor(private _signalRService: HelloHub) { \/\/ \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u043c\u0441\u044f \u043a \u0441\u043e\u0431\u044b\u0442\u0438\u044f\u043c \u043e\u0442 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 this.subscribeToEvents(); \/\/ \u041f\u043e\u043b\u0443\u0447\u0438\u043c \u0432\u0441\u0435 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0435 \u0437\u0430 \u0432\u0440\u0435\u043c\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b this.allMessages = this._signalRService.allMessages; \/\/ \u041f\u043e\u043b\u0443\u0447\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u0445 this.Users = _signalRService.Users; } \/\/ \u041c\u0435\u0442\u043e\u0434 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0439 \u0432\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 public sendMessage() { if (this.dropdown.value == "") \/\/ \u0415\u0441\u043b\u0438 \u0412\u044b\u0431\u0440\u0430\u043d "\u0412\u0441\u0435\u043c" \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043c \u0432\u0441\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c, \u043a\u0440\u043e\u043c\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u0435\u043b\u044f { this._signalRService.sendEcho(this.Message, ""); } else { \/\/ \u0412 1\u0421 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0441 \u043e\u0434\u043d\u0438\u043c \u0438\u043c\u0435\u043d\u0435\u043c if (!this.selectUsername) \/\/ \u0415\u0441\u043b\u0438 \u043d\u0435 \u0441\u0442\u043e\u0438\u0442 \u0433\u0430\u043b\u043a\u0430 "\u041f\u043e \u0418\u043c\u0435\u043d\u0438" \u0442\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c\u0443 \u043c\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e this._signalRService.sendEcho(this.Message, this.dropdown.value); else \/\/ \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0441 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u044b\u043c \u0438\u043c\u0435\u043d\u0435\u043c this._signalRService.sendByName(this.Message, this.dropdown.selectedOption.label); } this.Message = ""; } private subscribeToEvents(): void { let self = this; \/\/ \u041e\u0431\u043d\u043e\u0432\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u043d\u044b\u0445 \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\u0445 this._signalRService.onAddMessage.subscribe(() => { self.allMessages = this._signalRService.allMessages; }); \/\/ \u041e\u0431\u043d\u043e\u0432\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u0445 this._signalRService.onChangeUser.subscribe(() => { this.Users = self._signalRService.Users; } ); } }<\/code><\/pre>\n<\/p><\/div>\n<\/div>\n
\u041d\u0443 \u0438 \u043f\u043e\u043a\u0430\u0436\u0435\u043c HTML \u043a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430.<\/p>\n <div class="container" id="MainMessage"> <form role="form" (ngSubmit)="sendMessage()"> <div class="form-group"> <textarea type="text" [(ngModel)]="Message" name="Message" class="form-control" placeholder="\u0421\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u0435"><\/textarea> <\/div> <div class="form-group"> <div class="btn-group open"> <button type="submit" class="btn btn-info">\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c<\/button> <\/div> <div class="btn-group" id="users"> <p-dropdown2 [options]="Users" [(ngModel)]="selectedUser" name="dropdownUsers"><\/p-dropdown2> <\/div> <div class="btn-group" id="SendByName"> <div class="checkbox"> <label> <input type="checkbox" name="CheckBoxSendByName" [(ngModel)]="selectUsername" [disabled]="dropdown.value==''"> \u041f\u043e \u0438\u043c\u0435\u043d\u0438 <\/label> <\/div> <\/div> <\/div> <\/form> <\/div> <div class="row"> <div class="col-xs-12 col-md-8" id="GetingMessage"> <template ngFor let-item [ngForOf]="allMessages"> <div class='panel panel-primary'> <div class='panel-heading'> {{item.From.label}} \u043e\u0442 {{item.Sent.toLocaleString()}} <\/div> <div class='panel-body'> {{item.Message}} <\/div> <\/div> <\/template> <\/div> <div class="col-xs-6 col-md-4"> <\/div> <\/div> <\/code><\/pre>\n<\/div>\n<\/div>\n
\u0421\u0430\u043c \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 TS \u0432 JS \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 <\/p>\nvar _this = this;<\/code><\/pre>\nvar transport = this.chat.transport;<\/code><\/pre>\nvar transport = _this.chat.transport;<\/code><\/pre>\n let self = this;<\/code><\/pre>\n
\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 https:\/\/habrahabr.ru\/post\/318480\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u0422\u0430\u043a TypeScript \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u043b\u0438\u0436\u0435 \u043a C# (\u0438 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0420\u0443\u0441\u043b\u0438\u0448), \u0430 \u0441 \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u043c\u0438 \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u043e \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0437\u043d\u0430\u044f Razor \u0438 Xaml.<\/p>\n
<\/a>
\u041f\u043e\u043a\u0430 \u043d\u0435 \u0432\u044b\u0448\u0435\u043b. Net Core 1.2 \u0438 NetStandard 2, \u0441\u0435\u0439\u0447\u0430\u0441 \u043d\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u0434\u043b\u044f SignalR \u043f\u043e\u0434 .Net Core<\/p>\n
1. ASP.NET Core + Angular 2 \u0448\u0430\u0431\u043b\u043e\u043d \u0434\u043b\u044f Visual Studio <\/a>
2. \u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043f\u043e ASP.NET Core
<\/a>
3. \u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043f\u043e Angular 2
<\/a>
4. \u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043f\u043e TypeScript
<\/a>
5. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043e\u0442 PrimeNG
<\/a>
6. \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b Bootstrap
<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-283063","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/283063","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=283063"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/283063\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=283063"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=283063"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=283063"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}