SignalR – Trocando mensagens e notificações entre Server/Client de forma global e individual

Standard

No post anterior sobre o SignalR, fiz uma introdução rápida sobre a biblioteca, onde conseguimos observar que realmente é muito fácil a utilização da lib, além de demonstrar como podemos realizar a troca de mensagens/notificações entre server/client em tempo real.
Neste artigo, vou demonstrar como podemos requisitar uma função em server-side, e após o término, notificar todos os usuários conectados (client-side), ou apenas algum(ns) usuário(s) específico(s).

Para todos os exemplos, estou considerando que a importação dos scripts e referências para o SignalR já tenham sido realizadas (No artigo anterior eu demonstro como definir as referências e scripts para o SignalR funcionar corretamente).

Notificação Global

Veja como é simples o envio de notificações em tempo real para todos os usuários conectados, primeiramente vamos criar nossa conexão no script do cliente (client-side):

<script language="javascript" type="text/javascript">

    $(function () {

	// Cria objeto de conexão
	var nomeHubClient = $.connection.nomeHub;

        // Função que envia mensagem para o servidor
        $("#btnEnviaMsg").click(function () {

	    var mensagem = $('#mensagem').val();
            nomeHubClient.enviaMensagem(mensagem);
            $('#mensagem').val("");

        });

        // Inicia a conexão
        $.connection.hub.start(function () {
            // Envia para o servidor o usuário que está criando a conexão
	    // O campo #nomeUsuario é apenas um campo presente na nossa página aspx que identifica o nome do usuário em questão (Não é obrigatório)
	    nomeHubClient.join($('#nomeUsuario').val(""));
        });

        // Função chamada em real-time pelo servidor
        nomeHubClient.novaMensagem = function (mensagem) {
            mensagem = $("#mensagens").html() + "<br />" + mensagem;
            $("#mensagens").html(mensagem);
        };
    });

</script>

Continue reading

SignalR – Introdução, tipos de conexão e exemplo simples de utilização

Standard

Este post é uma introdução rápida e simplificada de uma série de artigos que pretendo publicar sobre a biblioteca SignalR. Minha ideia é publicar alguns artigos desta fantástica biblioteca, demonstrado o poder e facilidade para criar aplicações web com informações/atualizações em tempo real.

 

SignalR, o que é?

Basicamente, é uma biblioteca em .Net e de código livre, que viabiliza atualizações/notificações asíncronas em tempo real para aplicações web. Ou seja, ela permite enviar dados e informações entre client/server em tempo real. Legal em!

A Microsoft já oferece suporte ao SignalR, o mesmo abrange aplicações em Javascript, Silverlight, .Net, Windows Phone 7 e WinRT. Além da Microsoft a comunidade open source forneceu apoio para Mono e iOS também.

 

Mas o .Net Framework 4.5 não suporta Websockets, utilizado para recursos em tempo real?

Sim, e aconselho o estudo e aprendizado em Websockets, onde, com o framework 4.5 é possivel utilizar seus recursos com o namespace System.Web.WebSockets, porém, trabalhar com Websockets requer no mínimo o framework 4.5 e o IIS8 ou IIS8 Express para utiliza-lo. Sem contar que infelizmente apenas o Chrome 16++, Firefox 11++ e IE 10 o suportam.

Desta forma, hoje, estou utilizando o SignalR para aplicações em tempo real.

  Continue reading

ASP.NET MVC + Flexigrid ( Parte 4 ) – Criando botões e navegando entre os elementos do grid

Standard

Dando continuidade a série sobre como implementar o Flexigrid em aplicações ASP.NET MVC, neste post demonstrarei como podemos criar botões e navegar entre as linhas e itens do grid.

Criando Botões

Básicamente para criar botões basta definir a propriedade buttons, e criar as funcions que os mesmos chamam ao efetuar o click, veja:

buttons:
[
    { name: 'Adicionar', onpress: adiciona, title: 'Adicionar' },
    { name: 'Editar', onpress: edita, title: 'Editar' },
    { name: 'Excluir', onpress: exclui, title: 'Excluir' },
    { name: 'Verificar Seleção', onpress: visualizar, title: 'Visualizar' }
],

Continue reading

ASP.NET MVC + Flexigrid ( Parte 3 ) – Habilitando e configurando a busca (Dynamic Linq ou Func)

Standard

No artigo anterior vimos como podemos efetuar a ordenação em nosso grid, agora iremos ver como habilitar e configurar a busca nativa do Flexigrid. Porém, antes de começar gostaria de exclarecer que, neste post, estarei demonstrando o uso da ferramenta de busca já existente e nativa no Flexigrid. No decorrer do artigo irei demonstrar alguns prós e contras quanto a esta busca, e sugerir alguns complementos que podem deixar a busca ainda mais útil e potente. Continue reading

ASP.NET MVC + Flexigrid ( Parte 2 ) – Habilitando e configurando a ordenação com Dynamic Linq

Standard

Dando continuidade na série sobre ASP.NET MVC + Flexigrid, irei demonstrar nesta segunda parte como podemos habilitar e configurar a ordenação pelas colunas em nosso grid. Caso você ainda não tenha visto o artigo anterior onde falei, como criar e renderizar o grid, clique aqui. Isto é muito importante, pois durante todos as partes e novas implementações da série, estarei utilizando o projeto de exemplo da primeira parte.

Continue reading

ASP.NET MVC + Flexigrid ( Parte 1 ) – Entendendo, Criando e Renderizando o Grid

Standard

Flexigrid?

Para que não conhece, o Flexigrid é uma biblioteca jQuery gratuita que possibilita de uma forma bem simples e fácil o trabalho com Grids. Sabemos que atualmente existem diversos plugins de grid que possibilitam a implementação com aplicações MVC, porém, gosto muito do Flexigrid, pois ele é bem leve, robusto, simples, fácil, extremamente eficiente e além disso tudo ele é Free.

O Download do Flexigrid pode ser feito aqui.

Criando e configurando o projeto

Vamos criar um novo projeto MVC e adicionar um novo arquivo EDMX para trabalharmos com Entity Framework. Para o exemplo irei estar utilizando uma tabela de Clientes chamada tbClientes que possui apenas duas colunas: codCliente e nome. Continue reading

ASP.NET MVC – Renderizando/Trabalhando com Partial View pelo Controller com chamada via ajax/jQuery

Standard

Em alguns casos podemos necessitar a renderização de uma Partial View via código. Como por exemplo, imaginando que em nossa MasterPage já exista algo como:

 

<% Html.RenderPartial("MontaDetalhesComprasUserControl"); %>

 

Onde o mesmo exiba os detalhes de todas as suas compras realizadas até o momento. Porém, ao adicionarmos um novo item em nossas compras, ou atualiza-la de alguma forma via Ajax, precisamos atualizar os detalhes quanto as nossas compras também!

Continue reading

Utilizando Linq to jQuery

Standard

Olá,

É isso mesmo que você leu, e você não leu errado. Existe um projeto disponibilizado no CodePlex onde permite o uso do Linq com consultas jQuery, funcionando como apoio a funções e operações do plugin.

Abaixo segue um exemplo  de implementação onde fica totalmente claro a versatilidade e facilidade de uso do componente, lembrando que o mesmo foi retirado da página do projeto:

Entendendo sua utilização

Vamos imaginar que você possua diversas “divs” em sua página, onde cada uma possua um valor associado ao elemento “mode” e você queira esconder as que contenham o valor igual a ”big”. O mínimo a se fazer utilizando jQuery puro seria algo como:

$("div").each(function(){
    if($(this).data("mode") == "big") $(this).hide();});

Agora utilizando Linq to jQuery ficaria desta forma:

$("div").where().data("mode","big").select().hide();

Podemos também utilizar expressões lambda:

$("div").where('x=>x.data.mode == "big"').select().hide();


Na página do projeto é disponibilizado o download e mais exemplos de implementação.

Bom, por experiência própria achei bastante interessante, ótimo recurso de flexibilidade e produtividade para se trabalhar o jQuery.

Bom, fica aqui minha dica.

Até o próximo artigo!

Rafael Zaccanini
rafael.zaccanini@gmail.com