寫文不容易，請尊重原創：轉載註明 http://blog.csdn.net/meng6098

Websocket的環境支援：

1.支援html5的瀏覽器 經測試ie10和google可以用 

2.Net伺服器環境，.Net 4.5，IIS 8，win8，windows server2013，及以上版本。（這點很重要，我買了一個虛擬空間是iis7.5的，結果這個簡陋聊天室放上去無法連結。）

Websocket程式知識點：

Websocket的客戶端程式碼知識點：

<script type="text/javascript">

<!--申請一個Websocket物件，地址為伺服器一般處理程式地址，同http協議http://開頭一樣，WebSocket協議的URL使用ws://開頭，另外安全的WebSocket協議使用wss://開頭-->

var socket= new WebSocket(“ws://aiwantopws.com/WebSocketHandler.ashx”);

<!--WebSocket傳送訊息方法-->

socket.send(“Hello!”);

<!--WebSocket關係方法-->

socket.close();

<!--監聽事件-->

Socket.addEventListener("close", function (evt) { }, false);//監聽關閉事件

Socket.addEventListener("open", function (evt) { }, false);//監聽建立物件事件

Socket.addEventListener("message", function (evt) { }, false);//監聽訊息事件

Socket.addEventListener("error", function (evt) { }, false);//監聽錯誤事件

</script>
 

簡陋聊天室簡單的程式碼實現：

1. Index頁輸入使用者名稱，跳轉操作頁面default頁

2. 

<script type="text/javascript">

 var socket;

        var req = document.referrer;

//判斷來源

        if(req=="http://aiwantopws.com/index.aspx"||req== "http://aiwantopws.com/index.aspx") {

//獲取Get的使用者名稱

 var uname = GetQueryString("uname");

  if (uname!=null) {

                $(document).ready(function () {

//判斷瀏覽器是否支援HTML5 Web Sockets，這裡引用了一個modernizr-2.5.3.js包

                    if (!Modernizr.websockets) {

                       alert("該瀏覽器不支援 HTML5 Web Sockets!");

                        return;

                    }

//建立WebSocket物件。

                    socket=new WebSocket("ws://aiwantopws.com/WebSocketHandler.ashx");

//新增監聽事件，這裡我用json作為來回資訊傳遞

//當用戶連結（建立物件）時。

                    socket.addEventListener("open", function (evt) {

//傳送該使用者的使用者名稱到伺服器。

                        socket.send("{\"uname\":\"" + uname + "\"}");

                        $("#divHistory").append('<h3>Connection Opened with the server.</h3>');

                    }, false);

//當用戶執行關閉方法時，

                    socket.addEventListener("close", function (evt) {

                        $("#divHistory").append('<h3>Connection was closed. :' + evt.reason + '</h3>');

                    }, false);

//有訊息從伺服器傳送過來時執行

                    socket.addEventListener("message", function (evt) {

                      顯示訊息

                      更新線上人數（因為線上多少人在伺服器端更新）

                    }, false);

//出現異常時

                    socket.addEventListener("error", function (evt) {

                      顯示錯誤

                    }, false);

//傳送訊息

                    $("#btnSend").click(function () {

                         判斷連結狀態 {                      

                         傳送訊息   

                     }

                        else {

                         顯示該使用者斷線

                      }

                    });

//銷燬物件

                    $("#btnStop").click(function () {

                        socket.close();

                    });

                });

            } else {

                window.location.href = '/index.aspx';

            }

 

} else {

            window.location.href = '/index.aspx';

        }

</script>