WebSockets é uma técnica de comunicação bidireccional em um socket (TCP), um tipo de tecnologia PUSH. No momento, a ele ainda está sendo padronizado pelo W3C, porém, o últimas versões do Chrome e Safari tem suporte para WebSockets.
Ele é projetado para ser executado em navegadores da web e servidores web , mas pode ser usado por qualquer cliente ou servidor de aplicativos.
Transmissão de dados para clientes WebSocket
WebSockets não são os mesmos sockets TCP e por um um bom motivo. Embora pareça tentador poder abrir uma conexão TCP em estado bruto a partir do browser, a segurança do navegador seria imediatamente comprometida: qualquer website poderia, então, acessar a rede, em nome da o usuário, dentro do mesmo contexto de segurança do usuário. Por exemplo, um site poderia abrir uma conexão com um servidor SMTP remoto e começar a oferecer spam. Em vez disso, WebSockets estendem o protocolo HTTP por uma definição especial para que o navegador estabeleça uma conexão. Em outras palavras, é um protocolo opt-in, que requer um servidor independente.
WebSockets não são os mesmos sockets TCP e por um um bom motivo. Embora pareça tentador poder abrir uma conexão TCP em estado bruto a partir do browser, a segurança do navegador seria imediatamente comprometida: qualquer website poderia, então, acessar a rede, em nome da o usuário, dentro do mesmo contexto de segurança do usuário. Por exemplo, um site poderia abrir uma conexão com um servidor SMTP remoto e começar a oferecer spam. Em vez disso, WebSockets estendem o protocolo HTTP por uma definição especial para que o navegador estabeleça uma conexão. Em outras palavras, é um protocolo opt-in, que requer um servidor independente.
Nada impede que você converse com um servidor SMTP AMQP, ou qualquer outro através do protocolo bruto, mas você terá de introduzir um servidor WebSocket para intermediar a conexão.
Kaazing Gateway já fornece adaptadores para STOMP e Apache ActiveMQ, e você também pode implementar seus próprios pacotes JavaScript para outros. E se um servidor Java WebSocket base não é com você, Ruby EventMachine também nos permite construir uma estrutura muito simples orientada a eventos.....
Construindo o cliente:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
5.
6. <title>WebSockets Client</title>
7.
8. </head>
9. <body>
10. <div id="wrapper">
11.
12. <div id="container">
13.
14. <h1>WebSockets Client</h1>
15.
16. <div id="chatLog">
17.
18. </div><!-- #chatLog -->
19. <p id="examples">e.g. try 'hi', 'name', 'age', 'today'</p>
20.
21. <input id="text" type="text" />
22. <button id="disconnect">Disconnect</button>
23.
24. </div><!-- #container -->
25.
26. </div>
27. </body>
28. </html>
Eventos do WebSocket:
- onopen
- onmensage
- onclose
Criando o WebSocket
var socket = new WebSocket("ws://localhost:8000/socket/server/startDaemon.php");
Checando eventos simples:
1. socket.onopen = function(){
2. alert("Socket has been opened!");
3. }
Javascript
1. $(document).ready(function() {
2. if(!("WebSocket" in window)){
3. $('#chatLog, input, button, #examples').fadeOut("fast");
4. $('<p>Oh no, you need a browser that supports WebSockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container');
5. }else{
6.
7. //The user has WebSockets
8.
9. connect();
10.
11. function connect(){
12. //the connect function code is below
13.
14. }
15. });
Enviando dados:
1. $('#text').keypress(function(event) {
2. if (event.keyCode == '13') {
3. send();
4. }
5. });
A função send()
1. function send(){
2.
3. var text = $('#text').val();
4. if(text==""){
5. message('<p class="warning">Please enter a message');
6. return ;
7. }
8. try{
9. socket.send(text);
10. message('<p class="event">Sent: '+text)
11. } catch(exception){
12. message('<p class="warning"> Error:' + exception);
13. }
14.
15. $('#text').val("");
16.
17. }
Use:
socket.send(); //Thanks JavaScript
Fechando o socket:
1. $('#disconnect').click(function(){
2. socket.close();
3. });
Exemplo completo:
1. $(document).ready(function() {
2.
3. if(!("WebSocket" in window)){
4. $('#chatLog, input, button, #examples').fadeOut("fast");
5. $('<p>Oh no, you need a browser that supports WebSockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container');
6. }else{
7. //The user has WebSockets
8.
9. connect();
10.
11. function connect(){
12. var socket;
13. var host = "ws://localhost:8000/socket/server/startDaemon.php";
14.
15. try{
16. var socket = new WebSocket(host);
17.
18. message('<p class="event">Socket Status: '+socket.readyState);
19.
20. socket.onopen = function(){
21. message('<p class="event">Socket Status: '+socket.readyState+' (open)');
22. }
23.
24. socket.onmessage = function(msg){
25. message('<p class="message">Received: '+msg.data);
26. }
27.
28. socket.onclose = function(){
29. message('<p class="event">Socket Status: '+socket.readyState+' (Closed)');
30. }
31.
32. } catch(exception){
33. message('<p>Error'+exception);
34. }
35.
36. function send(){
37. var text = $('#text').val();
38.
39. if(text==""){
40. message('<p class="warning">Please enter a message');
41. return ;
42. }
43. try{
44. socket.send(text);
45. message('<p class="event">Sent: '+text)
46.
47. } catch(exception){
48. message('<p class="warning">');
49. }
50. $('#text').val("");
51. }
52.
53. function message(msg){
54. $('#chatLog').append(msg+'</p>');
55. }
56.
57. $('#text').keypress(function(event) {
58. if (event.keyCode == '13') {
59. send();
60. }
61. });
62.
63. $('#disconnect').click(function(){
64. socket.close();
65. });
66.
67. }//End connect
68.
69. }//End else
70.
71. });
Nooh... Muito bom! Excelente recurso. Vou testar
ResponderExcluirParabéns pela dica!