HTML5 WebSocket技術使用詳解_web2.0

來源:腳本之家  責任編輯:小易  

就是一組已經完成的協議,調用new WebSocket(url)與服務器握手,WebSocket.send()發送信息,onmessage事件處理得到的消息,很簡單的附:服務器端就不好做了,可以參考一下Torando(一個python語言的服務器,支持websocket)www.13333515.buzz防采集請勿采集本網。

WebSocket

WebSocket是HTML5開始提供的一種瀏覽器與服務器間進行全雙工通訊的網絡技術。

就是一組已經完成的協議,調用new WebSocket(url)與服務器握手,WebSocket.send()發送信息,onmessage事件處理得到的消息,很簡單的 附:服務器端就不好做了,可以參考一下Torando(一個python

現很多網站為了實現即時通訊,所用的技術都是輪詢(polling)。輪詢是在特定的的時間間隔(如每1秒),由瀏覽器對服務器發出HTTP請求,然后由服務器返回最新的數據給客服端的瀏覽器,這種方式有一個很大的弊端,就是會占用很多的帶寬。

我用chrome啟動websocket,用c#寫服務器。能夠建立鏈接(handshake),可是chrome的websocket在發送信息4次之后,會主動關閉鏈接。這里檢查過不是服務器主動關閉,服務器沒有異常。服務器的邏輯

最新的輪詢效果是Comet – 用了AJAX。但這種技術雖然可達到全雙工通信,但依然需要發出請求。

能夠建立鏈接(handshake),可是chrome的websocket在發送信息4次之后,會主動關閉鏈接。這里檢查過不是服務器主動關閉,服務器沒有異常。服務器的邏輯也很簡單,當建立了handshake之后,服務器不做任何

使用WebSocket,瀏覽器和服務器只需要要做一個握手的動作,然后,瀏覽器和服務器之間就形成了一條快速通道,兩者之間就直接可以數據互相傳送。而且它為我們實現即時服務帶來了兩大好處:

ping是icmp協議,socket是tcp協議。不在一個層 只能后臺開啟一個進程,執行ping命令,把結果通過websocket返回給頁面

節省資源:互相溝通的Header是很小的-大概只有 2 Bytes。

普通的Ping功能,像圖片Ping。只能單向通信。websocket支持全雙工、跨域通信。如果你只的是這個的話,websocket是完全可以的。之前有很多個朋友問了我用java結合websocket通信的問題。因此我特意

推送信息:不需要客戶端請求,服務器可以主動傳送數據給客戶端。

socket.io

Socket.IO是一個WebSocket庫,包括了客戶端的js和服務器端的nodejs,它的目標是構建可以在不同瀏覽器和移動設備上使用的實時應用。

socket.io的特點

易用性:socket.io封裝了服務端和客戶端,使用起來非常簡單方便。

跨平臺:socket.io支持跨平臺,這就意味著你有了更多的選擇,可以在自己喜歡的平臺下開發實時應用。

自適應:它會自動根據瀏覽器從WebSocket、AJAX長輪詢、Iframe流等等各種方式中選擇最佳的方式來實現網絡實時應用,非常方便和人性化,而且支持的瀏覽器最低達IE5.5。

WebSocket 安裝部署

npm install socket.io

服務監聽

socket.io的服務端啟動非常的簡單,引用socket.io模塊。

var io = require('socket.io');

然后調用listen函數,傳入監聽的端口號,開始服務監聽。啟用了80端口用于測試:

var io = require('socket.io')(80);

注冊事件

io.on('connection', function (socket) { socket.on('disconnect', function () { })})

connection事件在客戶端成功連接到服務端時觸發,有了這個事件,我們可以隨時掌握用戶連接到服務端的信息。

當客戶端成功建立連接時,在connection事件的回調函數中,我們還是可以為socket注冊一些常用的事件,如:disconnect事件,它在客戶端連接斷開是觸發,這時候我就知道用戶已經離開了。

WebSocket 啟動服務

目前為止,我們已經搭建好了一個最簡單的socket服務器,為了在瀏覽器中能夠訪問到我們的服務,我們還需要在服務端搭建一個簡單的web服務器,讓瀏覽器能夠訪問我們的客戶端頁面。

為了便捷,我們選用node.js中常用的express框架來實現web服務,示例如下:

var express = require('express');var app = express();app.get('/', function (req, res) { res.status(200).send('成功連接!')});var server = require('http').createServer(app);var io = require('socket.io')(server);io.on('connection', function (socket) {});server.listen(80);

WebSocket 客戶端引用

服務端構建完畢,下面看一看客戶端應該如何使用。

服務端運行后會在根目錄動態生成socket.io的客戶端js文件,客戶端可以通過固定路徑/socket.io/socket.io.js添加引用。

首先添加網頁index.html,并在網頁中引用客戶端js文件:

<script src="https://cdn.bootcss.com/socket.io/2.0.2/socket.io.js"></script>

WebSocket 連接服務

當客戶端成功加載socket.io客戶端文件后會獲取到一個全局對象io,我們將通過io.connect函數來向服務端發起連接請求。

var socket = io.connect('/');socket.on('connect',function(){ //連接成功});socket.on('disconnect',function(data){ //連接斷開});

connect函數可以接受一個url參數,url可以socket服務的http完整地址,也可以是相對路徑,如果省略則表示默認連接當前路徑。與服務端類似,客戶端也需要注冊相應的事件來捕獲信息,不同的是客戶端連接成功的事件是connect。

了解了客戶端如何使用,下面我們創建網頁index.html,并添加如下內容(保存):

<html><head> <script src="https://cdn.bootcss.com/socket.io/2.0.2/socket.io.js"></script> <script> window.onload = function(){ var socket = io.connect('/'); socket.on('connect',function(){ document.write('連接成功!'); }); }; </script></head><body></body></html>

頁面添加完畢還要記得在服務端app.js中為它添加路由,讓我們可以訪問測試網頁:

app.get('/index',function(req,res){ res.sendFile('index.html',{root:__dirname});});

WebSocket 實時通訊

服務端和客戶端都構建完畢了,下面開始發送消息。

當我們成功建立連接后,我們可以通過socket對象的send函數來互相發送消息,示例-客戶端向服務端發送消息(index.html):

var socket = io.connect('/');socket.on('connect',function(){ //客戶端連接成功后發送消息'hello world!' socket.send('hello world!');});socket.on('message',function(data){ alert(data);});

連接成功后,我們向服務端發送消息hello world!,還為socket注冊了message事件,它是send函數對應的接收消息的事件,當服務端向客戶端send消息時,我們就可以在message事件中接收到發送過來的消息。

服務端向客戶端發送消息也可以通過send的方式,示例 - 服務端向客戶端發送消息(app.js):

var io = require('scoket.io');io.on('connection', function (socket) { socket.send('Hello World!'); socket.on('message', function (data) { console.log(data); })});

與客戶端相同,服務端也需要為socket注冊message事件來接收客戶端發送過來的消息。

WebSocket 發送信息

socket.io既然是用來實現通訊的,那么如何發送、接收信息才是根本。

在socket.io中,emit函數用于發送數據,我們使用send的方式實現了信息的互發,其實send函數只是emit的封裝,實際上還是使用了emit,且看send函數是如何實現的:

function send(){ var args = toArray(arguments); args.unshift('message'); this.emit.apply(this, args); return this;}

在send函數中,獲取到原來的參數,并在原來的基礎上插入了一個參數message,然后調用了emit函數。通過send函數的實現,我們也學會了emit函數的用法,它有多個參數,第一個參數是事件名稱,在接收端注冊該事件就可以接收到發送過去的信息,事件名稱可以自由定義,在不同的場景下,我們可以定義不同的事件來接收消息。第二個參數才是發送的數據。了解清楚了工作原理,下面來將send替換成emit函數發送信息:

//app.jsio.on('connection',function(socket){ socket.emit('message','連接成功!'); socket.on('message',function(data){ });});

WebSocket 服務端事件

事件監聽是實現通訊的基礎,因此充分了解socket.io的事件,學習如何在正確的時候使用它們至關重要。在一些關鍵的的狀態下,socket.io可以注冊相應的事件,通過事件監聽,我們可以在這些事件中作出反應,常用的事件如下:

connection——客戶端成功連接到服務器。

message——捕獲客戶端send信息。。

disconnect——客戶端斷開連接。

error——發生錯誤。

WebSocket 客戶端

較服務端而言,客戶端提供更多的監聽事件,在實時應用中,我們可以為這些事件注冊監聽并作出反應,例如:connect提示用戶連接成功,disconnect時提示用戶停止服務等等。

connection——成功連接到服務器。

connecting——正在連接。

disconnect——斷開連接。

connect_failed——連接失敗。

error——連接錯誤。

message——監聽服務端send的信息。

reconnect_failed——重新連接失敗。

reconnect——重新連接成功。

reconnecting——正在重連。

那么客戶端socket發起連接時的順序是怎么樣的呢?當第一次連接時,事件觸發順序為: connecting → connect;

當失去連接時,事件觸發順序為:disconnect → reconnecting → connecting → reconnect → connect。

WebSocket 命名空間

命名空間著實是一個非常實用好用的功能。我們可以通過命名空間,劃分出不同的房間,在房間里的廣播和通信都不會影響到房間以外的客戶端。

那么如何創建房間呢?在服務端,通過of("")的方式來劃分新的命名空間:

io.of('chat').on('connection',function(socket){});

示例中,我們創建一個名為chat的房間,客戶端可以通過如下方式連接到指定的房間:

var socket = io.connect('/chat');

雖然連接到指定的房間,但是我們也可以在服務端操作,自由的進出房間:

socket.join('chat');//進入chat房間socket.leave('chat');//離開chat房間

WebSocket 廣播消息

在實時應用中,廣播是一個不可或缺的功能,socket.io提供兩種服務端廣播方式。

第一種廣播方式可以稱之為'全局廣播',顧名思義,全局廣播就是所有連接到服務器的客戶端都會受到廣播的信息:

socket.broadcast.emit('DATA',data);

但是,在實際應用場景中,我們很多時候并不需要所有用戶都收到廣播信息,有的廣播信息只發送給一部分客戶端,比如某個房間里面的用戶,那么可以使用如下方式:

socket.broadcast.to('chat').emit('DATA',data);

中間件

socket.io提供中間件功能,我們可以通過中間件來對請求進行預處理,比如身份驗證:

io.use(function(socket, next){ if (socket.request.headers.cookie) return next(); next(new Error('Authentication error'));});

示例中展示了通過中間件進行身份驗證,當沒有cookie的時候拋出異常。

傳遞參數

在很多應用場景中,客戶端發起連接請求時都需要傳遞參數,這些參數可能是身份驗證、初始化設置等等,那么socket.io發起連接時如何傳遞參數呢?

var socket = io.connect('/');

由于connect函數發起連接的參數是一個url,你可能會想到把參數拼接到url上,如http://xxxx?xx=xxxx,但是很遺憾這樣是行不通的,我們可以通過這樣的方式來傳遞參數:

var socket = io.connect('/',{ _query:'sid=123456' });

在服務端可以這樣獲取到傳遞的參數:

io.use(function(socket){ var query = socket.request._query; var sid = query.sid; });

客戶端傳遞的參數已經被解析成了一個json對象,這個對象就是_query。

1.WebSocket API簡介首先看一段簡單的javascript代碼,該代碼調用了WebSockets的API。[javascript]view plaincopyvar ws=new WebSocket(“ws:/echo.websocket.org”);ws.onopen=function(){ws.send(“Test!};ws.onmessage=function(evt){console.log(evt.data);ws.close();};ws.onclose=function(evt){console.log(“WebSocketClosed!};ws.onerror=function(evt){console.log(“WebSocketError!};這份代碼總共只有5行,現在簡單概述一下這5行代碼的意義。第一行代碼是在申請一個WebSocket對象,參數是需要連接的服務器端的地址,同http協議使用http://開頭一樣,WebSocket協議的URL使用ws:/開頭,另外安全的WebSocket協議使用wss:/開頭。第二行到第五行為WebSocket對象注冊消息的處理函數,WebSocket對象一共支持四個消息 onopen,onmessage,onclose和onerror,當Browser和WebSocketServer連接成功后,會觸發onopen消息;如果連接失敗,發送、接收數據失敗或者處理數據出現錯誤,browser會觸發onerror消息;當Browser接收到WebSocketServer發送過來的數據時,就會觸發onmessage消息,參數evt中包含server傳輸過來的數據;當Browser接收到WebSocketServer端發送的關閉連接請求時,就會觸發onclose消息。我們可以看出所有的操作都是采用消息的方式觸發的,這樣就不會阻塞UI,使得UI有更快的響應時間,得到更好的用戶體驗內容來自www.13333515.buzz請勿采集。


  • 本文相關:
  • php使用websocket示例詳解
  • javascript websocket使用實例介紹(簡明入門教程)
  • nginx反向代理websocket配置實例
  • python通過websocket與js客戶端通信示例分析
  • 使用java和websocket實現網頁聊天室實例代碼
  • java后端tomcat實現websocket實例教程
  • android中使用websocket實現群聊和消息推送功能(不使用webview)
  • 讓ie6也支持websocket采用flash封裝實現
  • spring和websocket相結合實現消息的推送
  • 完美解決spring websocket自動斷開連接再創建引發的問題
  • javascript之websocket技術詳解
  • 淺析nodejs實現websocket的數據接收與發送
  • 微信小程序 websocket詳解及應用
  • 使用swoole擴展php websocket示例
  • php中使用websocket詳解
  • php+html5基于websocket實現聊天室的方法
  • 詳解websocket+spring示例demo(已使用sockjs庫)
  • c#實現websocket協議客戶端和服務器websocket sharp組件實例解析
  • html5 websocket技術使用詳解
  • web2.0的幾個開源項目
  • web移動端fixed布局的解決方案
  • web2.0中流行的設計元素:顏色
  • web2.0編程思想:16條法則
  • 什么是web2.0?
  • web2.0色系
  • 一個html5頁面怎么創建多個websocket
  • HTML5的webSocket怎么理解
  • HTML5的WebSocket是什么原理
  • html5 websocket能傳送多少字節
  • HTML5 webSocket 有事例嗎
  • 請教html5的websocket無緣無故客戶端主動斷開原因
  • 請教html5的websocket無緣無故客戶端主動斷開原因
  • HTML5 websocket 能實現Ping功能嗎
  • HTML5 websocket 能實現Ping功能嗎
  • 請教html5的websocket無緣無故客戶端主動斷開原因
  • 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全javascriptasp.netphp編程ajax相關正則表達式asp編程jsp編程編程10000問css/htmlflex腳本加解密web2.0xml/rss網頁編輯器相關技巧安全相關網頁播放器其它綜合dart首頁web2.0php使用websocket示例詳解javascript websocket使用實例介紹(簡明入門教程)nginx反向代理websocket配置實例python通過websocket與js客戶端通信示例分析使用java和websocket實現網頁聊天室實例代碼java后端tomcat實現websocket實例教程android中使用websocket實現群聊和消息推送功能(不使用webview)讓ie6也支持websocket采用flash封裝實現spring和websocket相結合實現消息的推送完美解決spring websocket自動斷開連接再創建引發的問題javascript之websocket技術詳解淺析nodejs實現websocket的數據接收與發送微信小程序 websocket詳解及應用使用swoole擴展php websocket示例php中使用websocket詳解php+html5基于websocket實現聊天室的方法詳解websocket+spring示例demo(已使用sockjs庫)c#實現websocket協議客戶端和服務器websocket sharp組件實例解析html5 websocket技術使用詳解web2.0的幾個開源項目web移動端fixed布局的解決方案web2.0中流行的設計元素:顏色web2.0編程思想:16條法則什么是web2.0?web2.0色系什么是web2.0?web2.0的幾個開源項目web2.0中流行的設計元素:顏色web2.0編程思想:16條法則web2.0色系web移動端fixed布局的解決方案html5 websocket技術使用詳解什么是web2.0?web移動端fixed布局的解決方案web2.0的幾個開源項目web2.0中流行的設計元素:顏色web2.0編程思想:16條法則html5 websocket技術使用詳解web2.0色系
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.13333515.buzz All Rights Reserved
    3排列五开奖结果