SignalR实现网页实时聊天功能
SignalR是利用html5 sokit方式实现网页的实时性,在客户端不支持html5的情况下通过轮询实现
实现原理是客户端发送的消息先去服务器,然后服务器根据需要将消息广播到需要接收信息的客户群。
添加对应的包 nuget:install-package Microsoft.AspNet.SignalR.nuget会帮忙处理将需要的包都添加到项目中。nuget以后会看到项目多出一些引用:Microsoft.Owin,Microsoft.AspNet.SignalR等。多出一个script文件夹,文件夹里有SignalR依赖的jquery包以及SignalR.js
到这一步准备工作就做好了。
分析一下:这个组件本身实现的是一个网页实时聊天,刚刚也说了是客户端先将消息发送到服务端,服务端处理然后再广播到需要接收消息的客户端。
这么说的话,必然会有一个接收客户端消息的服务端程序存在。这一点跟Ajax非常类似,客户端发送消息,给服务端,然后服务端返回数据更新部分页面。然而SignalR不只可以在web中使用也可在winform程序中使用(文档中有说明)。那要在web中使用SignalR就必然要告诉程序SigalR不同于一般的后台程序,它不是一个普通的dll
我用mvc空模板做的例子,在执行完Global.asax中的内容会直接执行这里边的内容。我的理解里这就是实现那所谓的接口跟SignalR扯上关系了。
---------------------这一步非常关键。不能省略,
然后加一个控制器,加个视图。 加上一个SignalR的控制中心
解释一下代码
$(function () {}文档加载完毕以后,执行以下内容:
$.connection.testhub;连接到testhub控制中心(跟实现了hub类的类名相对应,如有必要可在类前加描述[HubName("控制名称")],在客户端就应该使用:$.connection.控制名称)
$.connection.hub.logging;查看调试信息,firebug中切换到控制器就能看到每一步执行的状态。
chart.client.addNewMessageToPage = function (message) { $("#message").append(message + "<br/>"); }
实现服务端定义的客户端方法接口这里对应的是sendmessage中addNewMessageToPage方法,可以传递一个参数。。
chart.client.del同上。
$.connection.hub.start().done(function () {
chart.state.username = "test";//客户端给服务端发送需要的变量
chart.server.joinGroup("ClientGroup");//将客户添加到组 这里可以是从数据库查询得到的数据
$("#btnok").click(function () {
chart.server.sendmessage($("#input").val());
});
$("#btndel").click(function () {
chart.server.clearmessage();
});
});
这里边就是成功连接到控制中心以后需要执行的一些东西。 chart.state.username = "test";定义变量
然后就是调用下服务端的方法:chart.server.joinGroup("ClientGroup");//将本客户端添加到组ClientGroup
$("#btnok").click(function () {
chart.server.sendmessage($("#input").val());
});
单击事件:调用服务端方法,
服务端只做一件事情(接收客户端发送的消息),然后根据需要把消息广播(添加一个客户端方法接口,具体怎么实现实在客户端做)
客户端:实现服务端定义好的接口。然后在需要的时候给服务端发送消息..
然后补充一点:每个客户端在连接到控制中心的时候会生成一个随机的userid.所以想要实现两个用户的网页聊天,需要将两个人所有客户端的连接加到同一个组里面进行消息广播。这样就可以实现消息的同步,可以同时手机上,ipad上,以及电脑上同时实现消息的广播,具体实现提示: chart.state.username = "test";//客户端给服务端发送需要的变量。。
- python mongodb爬取58网站
- 洛谷P1143 进制转换
- python爬取链家租房之获取北京所有区的网站分栏地址(第一次写,code太粗犷,欢迎提建议)
- Pandas-Series知识点总结
- Numpy基础知识点汇总
- P3388 【模板】割点(割顶)
- python爬取链家租房之获取房屋的链接和页面的详细信息
- 信用卡“坏账”客户分析(一)
- 一道简单的sql语句题
- python爬虫反爬取---设置User Agent自动变换header文件
- 一文读懂Python多线程
- 深入理解Python变量作用域与函数闭包
- TensorFlow从1到2 - 5 - 非专家莫入!TensorFlow实现CNN
- JetBrains Rider 破解 (ideaIU等等开发工具都通用)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法