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

编程问答

WebSocket使用案例

發布時間：2024/4/11 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 WebSocket使用案例小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

WebSocket使用案例

現在，很多網站為了實現推送技術，所用的技術都是 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. 服務端代碼

3. 效果展示

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

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

總結

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

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

上一篇： webrtc简单案例——音视频采集和播放
下一篇： webrtc一对一通话

编程问答

WebSocket使用案例

WebSocket使用案例

目錄

1. web客戶端 websocket

1. WebSocket 屬性

2. WebSocket 事件

3. WebSocket 方法

2. nodejs服務器端websocket

3. websocket案例

1. 客戶端代碼

2. 服務端代碼

3. 效果展示

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

總結