mvc中signalr实现一对一的聊天
Asp.net MVC中实现即时通讯聊天的功能。前几天刚写了一片基础入门的教程,今天就来实现一下使用signaIr实现一对一的聊天的功能,对于这种场景也是即时通讯最基本功能。好吧废话不多说。先来看一下最终实现的效果图:
首先我们先搭建好环境,如果不熟悉,看下前面写的一片文章 MVC中使用signalR入门教程
接着:我们就开始写UserHub.cs 集线器类
主要的步骤就是要:
1. 重写OnConnected连接方法和OnDisconnected断开方法
2.服务器端方法 SendMessage 发送消息 ,GetName获取用户名
3.客户端响应的提示返回信息方法,比如Clients.Client(Context.ConnectionId).addMessage(message) .等等
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using System.ComponentModel.DataAnnotations;
using System.Threading.Tasks;
using Newtonsoft.Json;
using Microsoft.AspNet.SignalR.Hubs;namespace SignaIrOneOnOneDemo
{[HubName("UserHub")]public class UserHub : Hub{public static List<User> users = new List<User>();//发送消息public void SendMessage(string connectionId ,string message){Clients.All.hello();var user = users.Where(s => s.ConnectionID == connectionId).FirstOrDefault();if (user != null){Clients.Client(connectionId).addMessage(message + "" + DateTime.Now, Context.ConnectionId);//给自己发送,把用户的ID传给自己Clients.Client(Context.ConnectionId).addMessage(message + "" + DateTime.Now, connectionId);}else{Clients.Client(Context.ConnectionId).showMessage("该用户已离线");}}[HubMethodName("exitChat")]public void GetName(string name){//查询用户var user = users.SingleOrDefault(u => u.ConnectionID == Context.ConnectionId);if (user != null){user.Name = name;Clients.Client(Context.ConnectionId).showId(Context.ConnectionId);}GetUsers();}/// <summary>/// 重写连接事件/// </summary>/// <returns></returns>public override Task OnConnected(){//查询用户var user = users.Where(w => w.ConnectionID == Context.ConnectionId).SingleOrDefault();//判断用户是否存在,否则添加集合if (user == null){user = new User("", Context.ConnectionId);users.Add(user);}return base.OnConnected();}public override Task OnDisconnected(bool stopCalled){var user = users.Where(p => p.ConnectionID == Context.ConnectionId).FirstOrDefault();//判断用户是否存在,存在则删除if (user != null){//删除用户users.Remove(user);}GetUsers();//获取所有用户的列表return base.OnDisconnected(stopCalled);}//获取所有用户在线列表private void GetUsers(){var list = users.Select(s => new { s.Name, s.ConnectionID }).ToList();string jsonList = JsonConvert.SerializeObject(list);Clients.All.getUsers(jsonList);}}public class User{[Key]public string ConnectionID { get; set; }public string Name { get; set; }public User(string name, string connectionId){this.Name = name;this.ConnectionID = connectionId;}}
}
然后我们来看一下前端页面是怎么写的
@{ViewBag.Title = "UserChat";Layout = null;
}
<h2>UserChat</h2>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.1.min.js"></script>
<script src="~/signalr/hubs"></script>
<script type="text/javascript">var clients = [];var chat;$(function () {chat = $.connection.UserHub;console.info(chat);//显示提示方法chat.client.showMessage = function (message) {alert(message);}//注册显示信息的方法chat.client.addMessage = function (message, connectionId) {debuggerif ($.inArray(connectionId, clients)==-1) {showWin(connectionId);}$("#" + connectionId).find("ul").each(function () {$(this).append('<li>'+message+'</li>');})}//注册显示所有用户的方法chat.client.getUsers = function (data) {if (data) {var json = $.parseJSON(data);console.info(json);$("#users").html(" ");for (var i = 0; i < json.length; i++) {var html = '<li>用户名:' + json[i].Name + '<button connectionId="' + json[i].ConnectionID + '" οnclick="userChat(this)">聊天</button>';$("#users").append(html);}}}//注册显示推出聊天提示的方法chat.client.exitUser = function (data){alert(data);}//注册显示个人信息的方法chat.client.showId = function (data){$("#conId").html(data);clients.push(data);}//获取用户名称$('#userName').html(prompt('请输入您的名称', ''));//连接成功后获取自己的信息$.connection.hub.start().done(function () {chat.server.getName($('#userName').html());});});//开始聊天function userChat(obj){var connectionId = $(obj).attr('connectionId');showWin(connectionId);}function showWin(connectionId){//var connectionId = $(obj).attr('connectionId');clients.push(connectionId);var html = '<div style="float:left;margin-left:30px;border:double" id="' + connectionId + '" connectionId="' + connectionId + '">' + connectionId + '"的房间聊天记录如下:<button οnclick="exitChat(this)">退出</button><ul></ul><input type="text" /> <button οnclick="sendMessage(this)">发送</button></div>';$("#userBox").append(html);}function exitChat(btnObj){debugger// var connectionId = $(btnObj).parent().attr("connectionId");$(btnObj).parent().remove();//chat.server.exitChat(connectionId);}//发送消息function sendMessage(data){var message = $(data).prev().val();var userObj = $(data).parent();var username = $("#userName").html();message = username + ":" + message;console.info($(userObj).attr("connectionId"));var targetConnectionId = $(userObj).attr("connectionId");chat.server.sendMessage(targetConnectionId, message);$(data).prev().val("");}
</script>
<div><div>名称:<p id="userName"></p></div><div>ConnectionID:<p id="conId"></p></div><div style="width:25%;border:1px solid #ff0000"><div>在线用户列表</div><ul id="users"></ul></div><div id="userBox"></div>
</div>
一个signalr一对一聊天例子就完成了,我们来简单的分析一下吧:
Clients.Client(connectionId).addMessage() 此方法的作用就是客户端注册addMessage方法,向指定连接Id的客户端发送消息。一对一的聊天发送的消息也必须回发给自己,所以连接的Id可以通过Context.ConnectionId来获取。当然不用Client.Client(Context.ConnectionId) ,也可以使用Client.Caller()方法直接发送
Client.Clients(IList<string> connectionIds) 这个方法的意思就是想一组string 的几个ConnectionId发送消息。类似于QQ上@好友的那种功能。
在谷歌浏览器中我们可以看到这些方法
可以很清楚的看到这个三个服务器端的方法,服务器端的方法名在客户端调用的时候都约定成了第一个字母小写了,但是可以通过方法上的特性HubMethodName进行标识。
这个集线器的UserHub也默认是第一个字母小写的,所以在前端写的时候要注意。源码下载地址:
作者:张林
标题:mvc中signalr实现一对一的聊天:http://blog.csdn.net/kebi007/article/details/53440242
转载随意注明出处
mvc中signalr实现一对一的聊天相关推荐
- 在 Asp.NET MVC 中使用 SignalR 实现推送功能
一,简介 Signal 是微软支持的一个运行在 Dot NET 平台上的 html websocket 框架.它出现的主要目的是实现服务器主动推送(Push)消息到客户端页面,这样客户端就不必重新发送 ...
- MVC中使用signalR入门教程
一.前言:每次写总要说一点最近的感想 进入工作快半年了,昨天是最郁闷的一天,我怀疑我是不是得了"星期一综合征",每个星期一很没有状态.全身都有点酸痛,这个可能一个星期只有周末才打一 ...
- 一对一视频直播源码实现网络中一对一视频聊天
一对一视频直播源码实现网络中一对一视频聊天 代码实现步骤 概述 首先要通信那就得满足通信的基础,我选择和目标放通信,前提就是我通过一定的条件将自己和目标建立链接,然后再将自己的通信信息交给目标,目标也 ...
- webrtc实现视频群聊系列文章(二)实现网络中一对一视频聊天
引言 在之前一篇文章写了webrtc实现基本的本地1对1视频通讯,这一篇文章则实现现实网络中一对一视频聊天. 目标 思考 webrtc实现点对点通信的基础是目标和自己之间能够建立网络链接,那么如何建立 ...
- 一对一视频聊天源码中的语言包应该如何开发
作为专业的一对一视频聊天源码开发服务商,与国外客户打交道是必不可少的,但是由于语言不同所以在开发和后期搭建部署时会遇到一些障碍. 除此之外还需要考虑国外客户在其所在国家上线运营时的语言问题,这就需要开 ...
- C# ASP.NET MVC 之 SignalR 学习 实时数据推送显示 配合 Echarts 推送实时图表
本文主要是我在刚开始学习 SignalR 的技术总结,网上找的学习方法和例子大多只是翻译了官方给的一个例子,并没有给出其他一些经典情况的示例,所以才有了本文总结,我在实现推送简单的数据后,就想到了如何 ...
- 在Spring MVC中使用Apache Shiro安全框架
我们在这里将对一个集成了Spring MVC+Hibernate+Apache Shiro的项目进行了一个简单说明.这个项目将展示如何在Spring MVC 中使用Apache Shiro来构建我们的 ...
- MVC实现类似QQ的网页聊天功能-ajax(下)
此篇文章主要是对MVC实现类似QQ的网页聊天功能(上)的部分代码的解释. 首先说一下显示框的滚动条置底的问题: 结构很简单一个大的div(高度一定.overflow:auto)包含着两个小的div第一 ...
- Android端一对一视频聊天系统功能实现方式
目前的直播市场,视频社交APP很受年轻人群的追捧,可以给商家带来巨大的用户和流量,同时也是资本青睐的对象.但是开发视频社交APP门槛高,难度大,让许多平台和商家望而却步. 云豹直播作为优质的视频社交A ...
最新文章
- 区块链+数字经济发展白皮书,45页pdf
- c++面向对象的编程
- java 学习心得 (近期的)
- html5 滤色,深入理解CSS mix-blend-mode滤色screen混合模式
- 9.2.1 Renaming Retrieved Columns
- java.lang.OutOfMemoryError:GC overhead limit exceeded
- docker mysql 防火墙_docker mysql
- php 换行 PHP_EOL变量
- linux的物理内存中swap压缩,linux中Centos7增加swap分区详解
- 谷歌浏览器linux 64怎么安装插件,Ubuntu 16.04下安装64位谷歌Chrome浏览器
- Windows平台内核级文件访问
- 用yum下载安装gcc
- Java - ip2region - 使用篇
- java字母转换成大写_java中如何把大写字母转换成小写字母,小写字母转换成大写字母?...
- 用计算机怎么弹两只老虎,七键两只老虎曲谱_64键的电子琴怎么弹两只老虎1234567按哪个键...
- IP Forwarding打开
- 高考志愿填报APP靠谱吗?大数据仅供参考不能依赖
- 用什么软件记录学员考勤好?
- Ubuntu下 vim安装失败的解决方法 以及安装vim
- 电脑+浏览器——黑色护眼
热门文章
- 微软研究公司公布新的Slimmed Down AR眼镜
- 动态删除nod linux_Linux文件操作实用笔记
- 阿里淘系程序员“开源”内部年度技术总结,还把P9大佬喊出来教你“打怪升级”...
- 树莓派DIY智能无臭猫便盆,拉完粑粑自动通风,成本不到400元
- 穿上就能凉快近5°C,华中大浙大夏日“避暑神器”登Science
- 英特尔又做了一个违背祖宗的决定:布局RISC-V
- 报名开启 | 李开复等AI大咖齐聚量子位MEET大会,邀你共探新形势下智能产业发展之路...
- 让模糊图片变视频,找回丢失的时间维度,MIT这项新研究简直像魔术
- 好物推荐 | 轻薄神器,妈妈再也不用担心我的颈椎了
- Spring框架5.1将提供对Java 11的支持