websocket基礎使用學習
- 一、websocket是什么？
- 二、使用步驟
- 1.websocket服務的安裝與啟動
- 安裝服務
- 連接與發消息
- 總結
一、websocket是什么？
以前，很多網站為了實現推送技術，所用的技術都是Ajax 輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP請求，然后由服務器返回最新的數據給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數據可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。
而WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。即實現客服實時消息回復，平臺主動通知之類的功能。
二、使用步驟
1.websocket服務的安裝與啟動
安裝服務
這里用全新的項目與文件來做demo。
新建一個空文件夾，在文件夾中運行cmd，進行npm初始化命令：npm init -y
安裝服務依賴包：npm install nodejs-websocket --save
編輯服務js文件：server.js
const ws = require('nodejs-websocket');const POST = 8080;const server = ws.createServer(connect => {connect.on("text", data => {console.log("received: "+data);connect.sendText(data);});connect.on("close", (code, reason) => {console.log("connection closed!");});connect.on('error', ()=>{console.log("connection error!");});});server.listen(POST, ()=>{console.log("websocket server start success!");});
在文件夾的cmd中啟動服務：node server.js，會看到下面結果：
服務就啟動好了。
連接與發消息
編寫html文件，來進行連接與發消息，例如：test.html
<!DOCTYPE HTML>
<html><head><meta charset="utf-8"><title>測試WebSocket</title><script type="text/javascript">// 打開一個 web socketvar ws = new WebSocket("ws://127.0.0.1:8080");ws.onopen = function(){// Web Socket 已連接上，使用 send() 方法發送數據ws.send("發送數據");};ws.onmessage = function (evt) { var received_msg = evt.data;};ws.onclose = function(){ // 關閉 websocket};var i =1;function sendmsg(){ws.send("發送數據"+i++);}</script></head><body><div id="sse"><a href="javascript:sendmsg()">發消息</a></div></body>
</html>
測試結果：
總結
這里就是基礎使用了。
