溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
準備：
開發工具：visual studio 2013
使用框架：SignalR、Jquery
正文
概述
基于ASP.NET web 應用程序創建并引用SignalR 和JQuery框架簡單實現文字聊天
開發任務：
A、創建一個空的ASP.NET web 項目
B、引用SignalR 和Jquery框架
C、創建一個集線器類，以將內容推送到客戶端。
D、創建一個OWIN Startup類，配置啟動。
E、在Web中使用SignalR jQuery實現消息的收發。
效果圖展示：
開發步驟
1、在 Visual Studio 中創建一個 ASP.NET Web 應用程序。
2、在解決方案資源管理器中，右鍵單擊項目，選擇添加|那么 SignalR 集線器類 (v2)。命名ChatHub.cs類并將其添加到該項目。此步驟將創建ChatHub類，并向項目中添加一組腳本文件和支持那么 SignalR 的程序集引用。
3、將ChatHub類替換如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChatDemo
{
public class ChatHub : Hub
{
/// <summary>
/// 發送消息
/// </summary>
/// <param name="name">姓名</param>
/// <param name="message">消息內容</param>
public void Send(string name, string message)
{
// 回調客戶端方法CallMessage通知客戶端
Clients.All.CallMessage(name, message);
}
}
}4、在解決方案資源管理器中，右鍵單擊該項目，然后單擊添加OWIN Startup啟動類。Startup新類的名稱并單擊確定。
注：如果您使用的 Visual Studio 2012，OWIN Startup啟動類模板將不可用。您可以添加一個名為Startup相反的普通類。
5、更改為以下內容的新的啟動類。
using System;
using System.Threading.Tasks;
using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SignalRChatDemo.Startup))]
namespace SignalRChatDemo
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
// 有關如何配置應用程序的詳細信息，請訪問 http://go.microsoft.com/fwlink/?LinkID=316888
app.MapSignalR();
}
}
}6、引用SignalR 和Jquery框架
在NuGet管理中輸入JqueryUI ,安裝JQuery UI庫，如下圖：
安裝完成后可以看到我們需要的兩個框架庫了，如下圖：
7、編寫Web頁面，實現聊天
<!DOCTYPE html>
<html>
<head>
<title>SignalR Simple Chat</title>
<style type="text/css">
.container {
background-color: #07325e;
border: thick solid #808080;
padding: 20px;
margin: 20px;
}
body{
color:white;
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="message" />
<input type="button" id="sendmessage" value="發送" />
<input type="hidden" id="name" />
<ul id="msgList"></ul>
</div>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script src="Scripts/jquery.signalR-2.1.2.min.js"></script>
<script src="signalr/hubs"></script>
<script type="text/javascript">
$(function () {
// 定義一個代理并引用Hub。注意：JS需要使用駝峰式大小寫
var chat = $.connection.chatHub;
// 創建一個客戶端方法，C# ChatHub類中的方法需要和客戶端方法保持一致，C# ChatHub類才能調用到客戶端方法
chat.client.CallMessage = function (name, message) {
// 對HTML進行編碼.
var encodedName = $('<div />').text(name).html();
var encodedMsg = $('<div />').text(message).html();
$('#msgList').append('<li><B>' + encodedName
+ '</B>: ' + encodedMsg + '</li>');
};
// 輸入需要在客戶端顯示的用戶名
$('#name').val(prompt('親輸入的您的姓名:', ''));
$('#message').focus();
// 啟動一個連接
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
// 回調服務的的send方法并傳入參數
chat.server.send($('#name').val(), $('#message').val());
$('#message').val('').focus();
});
});
});
</script>
</body>
</html>×××
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
