Demo地址：www.awbeci.xyz
websocket有java、nodejs、python，Php等等版本，我使用的是C#版本，服務器端是Fleck，github地址：https://github.com/statianzo/Fleck
這篇博客就是引用上面的一個例子教你如何使用客戶端和服務器端來使用websocket的，對於英文還不錯的同學，直接看上面 的源代碼就可以了，下面開始講解如何使用：
在說之前我們先來看看哪些瀏覽器支持websocket:
WebSocket客戶端支持
| 瀏覽器 | 支持情況 |
|---|---|
| Chrome | Chrome version 4+支持 |
| Firefox | Firefox version 5+支持 |
| IE | IE version 10+支持 |
| Safari | IOS 5+支持 |
| Android Brower | Android 4.5+支持 |
WebSocket 服務端支持
| 廠商 | 應用服務器 | 備注 |
|---|---|---|
| IBM | WebSphere | WebSphere 8.0 以上版本支持，7.X 之前版本結合 MQTT 支持類似的 HTTP 長連接 |
| 甲骨文 | WebLogic | WebLogic 12c 支持，11g 及 10g 版本通過 HTTP Publish 支持類似的 HTTP 長連接 |
| 微軟 | IIS | IIS 7.0+支持 |
| Apache | Tomcat | Tomcat 7.0.5＋支持，7.0.2X 及 7.0.3X 通過自定義 API 支持 |
| Jetty | Jetty 7.0＋支持 |
現在我們看看瀏覽器端如何實現：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>websocket client</title> <script type="text/javascript"> var start = function () { var inc = document.getElementById('incomming'); var wsImpl = window.WebSocket || window.MozWebSocket; var form = document.getElementById('sendForm'); var input = document.getElementById('sendText'); inc.innerHTML += "connecting to server ..<br/>"; // create a new websocket and connect window.ws = new wsImpl('ws://localhost:7181/'); // when data is comming from the server, this metod is called ws.onmessage = function (evt) { inc.innerHTML += evt.data + '<br/>'; }; // when the connection is established, this method is called ws.onopen = function () { inc.innerHTML += '.. connection open<br/>'; }; // when the connection is closed, this method is called ws.onclose = function () { inc.innerHTML += '.. connection closed<br/>'; } form.addEventListener('submit', function (e) { e.preventDefault(); var val = input.value; ws.send(val); input.value = ""; }); } window.onload = start; </script> </head> <body> <form id="sendForm"> <input id="sendText" placeholder="Text to send" /> </form> <pre id="incomming"></pre> </body> </html>
服務器端我使用的是C#的控制台程序：
using System; using System.Collections.Generic; using System.Linq; using System.Text; using Fleck; namespace TopoWebSocket { class Program { static void Main(string[] args) { FleckLog.Level = LogLevel.Debug; var allSockets = new List<IWebSocketConnection>(); var server = new WebSocketServer("ws://0.0.0.0:7181"); server.Start(socket => { socket.OnOpen = () => { Console.WriteLine("Open!"); allSockets.Add(socket); }; socket.OnClose = () => { Console.WriteLine("Close!"); allSockets.Remove(socket); }; socket.OnMessage = message => { Console.WriteLine(message); allSockets.ToList().ForEach(s => s.Send("Echo: " + message)); }; }); var input = Console.ReadLine(); while (input != "exit") { foreach (var socket in allSockets.ToList()) { socket.Send(input); } input = Console.ReadLine(); } } } }
注意要引用：using Fleck;這個在上面的鏈接里面已經提供了。代碼都寫好后，我們來運行下服務器端吧，客戶端也可以，總之兩個都運行好：如圖：
現在你可以客戶端向服務器端發送消息了，我們試試，輸入你好世界：
然后我們再在服務器端發送消息給瀏覽器試試，如，HelloWorld
也成功了，呵呵，是不是很神奇，現在可以添加自己 的業務邏輯在里面了，是不是 覺得前后台通信變得簡單了。
總結：
1、這個例子不是我寫的，我只不過在github上拿過來給你們介紹，你們可以通過上面的例子fork下源代碼，自己看看分析分析別人是怎么用的
2、如果有問題可以加群問我：464696550
3、參考資料：http://www.ibm.com/developerworks/cn/java/j-lo-WebSocket/