一步一步教您用websocket+nodeJS搭建簡易聊天室（1）

02-03

WebSocket是HTML5開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。

在WebSocket API中，瀏覽器和伺服器只需要做一個握手的動作，然後，瀏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。

瀏覽器通過 JavaScript 向伺服器發出建立 WebSocket 連接的請求，連接建立以後，客戶端和伺服器端就可以通過 TCP 連接直接交換數據。

當你獲取 Web Socket 連接後，你可以通過 send() 方法來向伺服器發送數據，並通過 onmessage 事件來接收伺服器返回的數據。

以下 API 用於創建 WebSocket 對象。

var Socket = new WebSocket(url, [protocol] );n

以上代碼中的第一個參數 url, 指定連接的 URL。第二個參數 protocol 是可選的，指定了可接受的子協議。

通過本系列教程，我將教大家從零開始用websocket+nodeJS搭建一個簡易的聊天室

首先我們擼個最簡單的Demo讓大家感受一家websocket的模樣。

本樣例實現功能：

點擊發送按鈕獲取文本框的內容並將它發送到服務端，

服務端將這條消息原樣返回並顯示在頁面。

為了便於新手理解，服務端介面使用websocket官方服務

<!doctype html>n<html>nt<head>ntt<meta charset="utf-8">ntt<title>websocket</title>nt</head>nt<body>ntt<h1>echo test</h1>ntt<input id="sendText" type="text" />ntt<button id="sendBtn">發送</button>ntt<div id="recv"></div>nt</body>nt<script type="text/javascript">ntt/*nttt本樣例實現功能：nttt點擊發送按鈕獲取文本框的內容並將它發送到服務端，nttt服務端將這條消息原樣返回並顯示在頁面。nttt為了便於新手理解，服務端介面使用websocket官方服務ntt*/nttvar websocket=new WebSocket("ws://echo.websocket.org/");//創建一個websocket連接，服務端使用websocket官方服務nttwebsocket.onopen=function(){ //websocket服務打開ntttconsole.log("websocket open");ntttdocument.getElementById("recv").innerHTML="connected";ntt}nttwebsocket.onclose=function(){ //websocket服務關閉ntttconsole.log("websocket close");ntttntt}nttwebsocket.onmessage=function(e){ //websocket服務接收到消息ntttconsole.log(e.data);ntttdocument.getElementById("recv").innerHTML=e.data;//將消息顯示在消息列表ntt}nttdocument.getElementById("sendBtn").onclick=function(){ntttvar txt=document.getElementById("sendText").value;ntttwebsocket.send(txt);//將文本輸入框中的內容發送到服務端ntt}nt</script>nn</html>n

運行截圖：

從下節開始我們將開始用nodeJS在本地搭建屬於自己的服務端。