日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

WebSocket使用案例

發布時間：2024/4/11 编程问答 32 豆豆
生活随笔 收集整理的這篇文章主要介紹了 WebSocket使用案例 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

WebSocket使用案例

目錄

  • web客戶端 websocket

  • nodejs服務器端websocket

  • websocket案例

  • 對于WebRTC項目而言，nodejs主要是實現信令服務器的功能，客戶端和服務器端的交互我們選擇websocket作為通信協議。

    • 1. web客戶端 websocket

  • WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。
  • WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在 WebSocketAPI 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，并進行雙向數據傳輸。
  • 在 WebSocket API 中，瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。
  • 現在，很多網站為了實現推送技術，所用的技術都是 Ajax 輪詢。輪詢是在特定的的時間間隔（如每1秒），由瀏覽器對服務器發出HTTP請求，然后由服務器返回最新的數據給客戶端的瀏覽器。這種傳統的模式帶來很明顯的缺點，即瀏覽器需要不斷的向服務器發出請求，然而HTTP請求可能包含較長的頭部，其中真正有效的數據可能只是很小的一部分，顯然這樣會浪費很多的帶寬等資源。
  • HTML5 定義的 WebSocket 協議，能更好的節省服務器資源和帶寬，并且能夠更實時地進行通訊。
  • 瀏覽器通過 JavaScript 向服務器發出建立 WebSocket 連接的請求，連接建立以后，客戶端和服務器端就可以通過TCP 連接直接交換數據。
  • 當你獲取 Web Socket 連接后，你可以通過 send() 方法來向服務器發送數據，并通過 onmessage 事件來接收服務器返回的數據。
  • 以下 API 用于創建 WebSocket 對象。
    • var Socket = new WebSocket(url, [protocol] );
  • 以上代碼中的第一個參數 url, 指定連接的 URL。第二個參數 protocol 是可選的，指定了可接受的子協議

    • 1. WebSocket 屬性

  • 以下是 WebSocket 對象的屬性。假定我們使用了以上代碼創建了 Socket 對象：

    • 2. WebSocket 事件

  • 以下是 WebSocket 對象的相關事件。假定我們使用了以上代碼創建了 Socket 對象：

    • 3. WebSocket 方法

  • 以下是 WebSocket 對象的相關方法。假定我們使用了以上代碼創建了 Socket 對象：
  • 為了建立一個 WebSocket 連接，客戶端瀏覽器首先要向服務器發起一個 HTTP 請求，這個請求和通常的 HTTP 請求不同，包含了一些附加頭信息，其中附加頭信息"Upgrade: WebSocket"表明這是一個申請協議升級的 HTTP 請求，服務器端解析這些附加的頭信息然后產生應答信息返回給客戶端，客戶端和服務器端的 WebSocket 連接就建立起來了，雙方就可以通過這個連接通道自由的傳遞信息，并且這個連接會持續存在直到客戶端或者服務器端的某一方主動的關閉連接。

    • 2. nodejs服務器端websocket

  • Nodejs教程：添加鏈接描述
  • 簡單的說 Node.js 就是運行在服務端的 JavaScript。
  • 服務器端使用websocket需要安裝nodejs-websocket
    • cd 工程目錄 # 此刻我們需要執行命令： sudo npm init #創建package.json文件，系統會提示相關配置，也可以使用命令： sudo npm init ‐y sudo npm install nodejs‐websocket

  • 官方參考：https://www.npmjs.com/package/nodejs-websocket

  • 我們只要關注：
    （1）如何創建websocket服務器，通過createServer和listen接口；
    （2）如何判斷有新的連接進來，createServer的回調函數判斷；
    （3）如何判斷關閉事件，通過on(“close”, callback) 事件的回調函數；
    （4）如何判斷接收到數據，通過on(“text”, callkback)事件的回調函數；
    （5）如何判斷接收異常，通過on(“error”, callkback)事件的回調函數；
    （6）如何主動發送數據，調用sendText

  • 代碼示例：

    • var ws = require("nodejs‐websocket") // Scream server example: "hi" ‐> "HI!!!" var server = ws.createServer(function (conn) {console.log("New connection")conn.on("text", function (str) { // 收到數據的響應console.log("Received " + str)conn.sendText(str.toUpperCase() + "!!!") // 發送})conn.on("close", function (code, reason) { // 關閉時的響應console.log("Connection closed")})conn.on("error", function (err) { // 出錯console.log("error:" + err);}); }).listen(8001)

    3. websocket案例

  • 消息類型分為三種：
  • enter：新人進入 （藍色字體顯示）
  • message：普通聊天信息 （黑色字體顯示）
  • leave：有人離開 （紅色字體顯示）
  • 服務器在收到某個客戶端的消息（message+enter+leave），然后將其廣播給所有的客戶端（包括發送者）。

    • 1. 客戶端代碼

    <html> <head><meta charset="UTF-8"><title>webrtc demo</title> </head><body><h1>Websocket簡易聊天</h1><div id="app"><input id="sendMsg" type="text" /><button id="submitBtn">發送</button></div> </body> <script type="text/javascript">//在頁面顯示聊天內容function showMessage(str, type) {var div = document.createElement("div");div.innerHTML = str;if (type == "enter") {div.style.color = "blue";} else if (type == "leave") {div.style.color = "red";}document.body.appendChild(div);}//新建一個websocketvar websocket = new WebSocket("ws://127.0.0.1:8099");//打開websocket連接websocket.onopen = function () {console.log("已經連上服務器----");document.getElementById("submitBtn").onclick = function () {var txt = document.getElementById("sendMsg").value;if (txt) {//向服務器發送數據websocket.send(txt);}};};//關閉連接websocket.onclose = function () {console.log("websocket close");};//接收服務器返回的數據websocket.onmessage = function (e) {var mes = JSON.parse(e.data); // json格式showMessage(mes.data, mes.type);}; </script></html>

    2. 服務端代碼

    var ws = require("nodejs-websocket") var port = 8099; var user = 0;// 創建一個連接 var server = ws.createServer(function (conn) {console.log("創建一個新的連接--------");user++;conn.nickname="user" + user;conn.fd="user" + user;var mes = {};mes.type = "enter";mes.data = conn.nickname + " 進來啦"broadcast(JSON.stringify(mes));//向客戶端推送消息conn.on("text", function (str) {console.log("回復 "+str)mes.type = "message";mes.data = conn.nickname + " 說: " + str;broadcast(JSON.stringify(mes));});//監聽關閉連接操作conn.on("close", function (code, reason) {console.log("關閉連接");mes.type = "leave";mes.data = conn.nickname+" 離開了"broadcast(JSON.stringify(mes));});//錯誤處理conn.on("error", function (err) {console.log("監聽到錯誤");console.log(err);}); }).listen(port);function broadcast(str){server.connections.forEach(function(connection){connection.sendText(str);}) }

    3. 效果展示

    4. websocket部署在阿里云連接不上？

  • 測試時，將服務端代碼部署在阿里云，發送訪問不通，需要配置網絡端口，弄了好久才發現…

    • 總結

    以上是生活随笔為你收集整理的WebSocket使用案例的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。