目標
本文目標是以Node.js建立Websocket，供使用者連入網站以後，可以持續的與
伺服器進行溝通，而不必每次都要以Ajax送出HTTP Request。
需求
安裝websocket
在終端機輸入npm install websocket
即可安裝完畢，下面是它的github：
https://github.com/theturtle32/WebSocket-Node
儲存成server.js
https://github.com/theturtle32/WebSocket-Node
實做
server.js Websocket Server
//引入http websocket
var http = require('http');
var ws = require('websocket').server;
// 建立server 並監聽Port 9999
var PORT = 9999;
var server = http.createServer().listen(PORT)
// 產生websocketServer
webSocketServer = new ws({
httpServer: server
});
//當使用者連入時 觸發此事件
webSocketServer.on('request', function(request) {
var connection = request.accept('echo-protocol', request.origin);
//當websocket server收到訊息時 觸發此事件
connection.on('message', function(message) {
console.log(message)
connection.send("我收到了: " + message.utf8Data);
});
//當使用者socket連線中斷時 例如：關閉瀏覽器 觸發此事件
connection.on('close', function(reasonCode, description) {
console.log('Close');
});
});儲存成server.js
index.html Client端連線頁面
<!DOCTYPE html>
<html>
<head>
<!--載入jQuery-->
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script>
//建立WebSocket 連到127.0.0.1 Port為9999
//echo-protocol為約定好的自訂protocol 在WebSocket Server端也要設定
var mySocket = new WebSocket("ws://127.0.0.1:9999", "echo-protocol");
//Socket接收訊息時會呼叫此函數，處理接收到的訊息
mySocket.onmessage = function(e) {
$('#message').html(e.data);
}
mySocket.onopen = function(e) {
mySocket.send('連線完成！');
}
function sendMessage() {
message = $('#userInput').val();
//傳送訊息給Server
mySocket.send(message);
$('#userInput').val('');
}
</script>
</head>
<body>
<div id="userDiv">
<input type="text" id="userInput">
<button id="sendButton" onClick="sendMessage()">Send</button>
</div>
<div id="message"></div>
</body>
</html>輸入
node server.js
打開index.html頁面
即可看到結果
有什麼問題歡迎留言
沒有留言:
張貼留言