码迷,mamicode.com
首页 > 其他好文 > 详细

SignalR点对点聊天

时间:2015-01-06 17:10:10      阅读:340      评论:0      收藏:0      [点我收藏+]

标签:

 public class ChatHub : Hub
    {
        //声明静态变量存储当前在线用户
        public static class UserHandler
        {
            public static Dictionary<string, string> ConnectedIds = new Dictionary<string, string>();
        }

        //用户进入页面时执行的(连接操作)
        public void userConnected(string name)
        {
            //进行编码,防止XSS攻击
            name = HttpUtility.HtmlEncode(name);
            string message = "用户 " + name + " 登录";

            //发送信息给其他人
            Clients.Others.addList(Context.ConnectionId, name);
            Clients.Others.hello(message);

            //发送信息给自己,并显示上线清单
            Clients.Caller.getList(UserHandler.ConnectedIds.Select(p => new { id = p.Key, name = p.Value }).ToList());

            //新增目前使用者上线清单
            UserHandler.ConnectedIds.Add(Context.ConnectionId, name);
        }

        //发送信息给所有人
        public void sendAllMessage(string message)
        {
            message = HttpUtility.HtmlEncode(message);
            var name = UserHandler.ConnectedIds.Where(p => p.Key == Context.ConnectionId).FirstOrDefault().Value;
            message = name + "说:" + message;
            Clients.All.sendAllMessge(message);
        }

        //发送信息给特定人
        public void sendMessage(string ToId, string message)
        {
            message = HttpUtility.HtmlEncode(message);
            var fromName = UserHandler.ConnectedIds.Where(p => p.Key == Context.ConnectionId).FirstOrDefault().Value;
            message = fromName + " <span style=‘color:red‘>悄悄对你说</span>:" + message;
            Clients.Client(ToId).sendMessage(message);
        }

        public override Task OnDisconnected()
        {
            //当使用者离开时,移除在清单内的ConnectionId
            Clients.All.removeList(Context.ConnectionId);
            UserHandler.ConnectedIds.Remove(Context.ConnectionId);
            return base.OnDisconnected();
        }
}
<!--Reference the SignalR library. -->
<script src="../../Scripts/jquery.signalR-1.1.4.min.js" type="text/javascript"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="../../signalr/hubs"></script>

<fieldset>
    <legend>系统使用交流及问题在线提交</legend>
    <div id="messageBox">
        <ul id="messageList"></ul>
    </div>
    <div id="chatList">
        <p>当前在线</p>
        <ul id="list"></ul>
    </div>
    <div id="bar">
        <div style="margin-top: 6px; float: left;">
            <select id="box">
                <option value="all">所有人</option>
            </select>
        </div>
        <div style="margin: 5px; float: left;">
            <input id="message" type="text" value="" />
        </div>
        <div style="margin: 5px; float: left;">
            <input type="button" id="send" value="发 送" class="btn btn-success" />
        </div>
    </div>
    <input type="hidden" id="UserName" value="@ViewBag.UserId" />
</fieldset>


<script type="text/javascript">
    var userID = "";

    $(function () {
        //回车查询
        var $inp = $(input:text);
        $inp.bind(keydown, function (e) {
            var key = e.which;
            if (key == 13) {
                $(#send).click();
            }
        });
        userID = $("#UserName").val();
        //建立與Server端的Hub的物件,注意Hub的開頭字母一定要為小寫
        var chat = $.connection.chatHub;

        //取得所有上線清單
        chat.client.getList = function (userList) {
            var li = "";
            $.each(userList, function (index, data) {
                li += "<li id=‘" + data.id + "‘>" + data.name + "</li>";
            });
            $("#list").html(li);
        }


        //新增一筆上線人員
        chat.client.addList = function (id, name) {
            var li = "<li id=‘" + id + "‘>" + name + "</li>";
            $("#list").append(li);
        }
        //移除一筆上線人員
        chat.client.removeList = function (id) {
            $("#" + id).remove();
        }

        //全體聊天
        chat.client.sendAllMessge = function (message) {
            $("#messageList").append("<li>sendAllMessge" + message + "</li>");
        }

        //密語聊天
        chat.client.sendMessage = function (message) {
            $("#messageList").append("<li>sendMessage" + message + "</li>");
        }
        chat.client.hello = function (message) {
            $("#messageList").append("<li>hello" + message + "</li");
        }

        //將連線打開
        $.connection.hub.start().done(function () {
            //當連線完成後,呼叫Server端的userConnected方法,並傳送使用者姓名給Server
            chat.server.userConnected(userID);
        });;

        $("#send").click(function () {
            var to = $("#box").val();
            //當to為all代表全體聊天,否則為私密聊天
            if (to == "all") {
                chat.server.sendAllMessage($("#message").val());
            } else {
                chat.server.sendMessage(to, $("#message").val());
            }
            $("#message").val(‘‘);
        });


        $("#list li").live("click", function () {
            var $this = $(this);
            var id = $this.attr("id");
            var text = $this.text();

            //防止重複加入密語清單
            if ($("#box").has("." + id).length > 0)
                return false;
            var option = "<option></option>"
            $("#box").append(option).find("option:last").val(id).text(text).attr({ "selected": "selected" }).addClass(id);
        });

    });
</script>

 

SignalR点对点聊天

标签:

原文地址:http://www.cnblogs.com/yufan27209/p/4206093.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!