web Socket和Socket.IO框架

時間 2020-01-22

原文原文鏈接

HTTP沒法輕鬆實現實時應用：

● HTTP協議是無狀態的，服務器只會響應來自客戶端的請求，可是它與客戶端之間不具有持續鏈接。
● 咱們能夠很是輕鬆的捕獲瀏覽器上發生的事件（好比用戶點擊了盒子），這個事件能夠輕鬆產生與服務器的數據交互（好比Ajax）。可是，反過來倒是不可能的：服務器端發生了一個事件，服務器沒法將這個事件的信息實時主動通知它的客戶端。只有在客戶端查詢服務器的當前狀態的時候，所發生事件的信息纔會從服務器傳遞到客戶端。javascript

WebSocket協議可以讓瀏覽器和服務器全雙工實時通訊，互相的，服務器也能主動通知客戶端了。html

● WebSocket的原理很是的簡單：利用HTTP請求產生握手，HTTP頭部中含有WebSocket協議的請求，因此握手以後，兩者轉用TCP協議進行交流（QQ的協議）。如今的瀏覽器和服務器之間，就是QQ和QQ服務器的關係了。
因此WebSocket協議，須要瀏覽器支持，更須要服務器支持。
● 支持WebSocket協議的瀏覽器有：Chrome 四、火狐四、IE十、Safari5
● 支持WebSocket協議的服務器有：Node 0、Apach7.0.二、Nginx1.3java

Node.js上須要寫一些程序，來處理TCP請求。
● Node.js從誕生之日起，就支持WebSocket協議。不過，從底層一步一步搭建一個Socket服務器很費勁（想象一下Node寫一個靜態文件服務都那麼費勁）。因此，有大神幫咱們寫了一個庫Socket.IO。
● Socket.IO是業界良心，新手福音。它屏蔽了全部底層細節，讓頂層調用很是簡單。而且還爲不支持WebSocket協議的瀏覽器，提供了長輪詢的透明模擬機制。
● Node的單線程、非阻塞I/O、事件驅動機制，使它很是適合Socket服務器。npm

網址：http://socket.io/瀏覽器

咱們來看怎麼作

先要npm下載這個庫
1npm install socket.io服務器

寫原生的JS，搭建一個服務器，server建立好以後，建立一個io對象
1var http = require("http");
2
3var server = http.createServer(function(req,res){
4 res.end("你好");
5});
6
7var io = require('socket.io')(server);
//監聽鏈接事件
io.on("connection",function(socket){app

console.log("1個客戶端鏈接了");

})socket

8
9server.listen(3000,"127.0.0.1");
寫完這句話以後，你就會發現，http://127.0.0.1:3000/socket.io/socket.io.js 就是一個js文件的地址了。函數

如今須要製做一個index頁面，這個頁面中，必須引用祕密js文件。調用io函數，取得socket對象。
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6</head>
7<body>
8 <h1>我是index頁面，我引用了祕密script文件</h1>
9 <script type="text/javascript" src="/socket.io/socket.io.js"></script>
10 <script type="text/javascript">
11 var socket = io();
12 </script>
13</body>
14</html>ui

此時，在服務器上，app.js中就要書寫靜態文件呈遞程序，可以呈遞靜態頁面。
1var server = http.createServer(function(req,res){
2 if(req.url == "/"){
3 //顯示首頁
4 fs.readFile("./index.html",function(err,data){
5 res.end(data);
6 });
7 }
8});

至此，服務器和客戶端都有socket對象了。服務器的socket對象：

服務器端的：

1var io = require('socket.io')(server);
2//監聽鏈接事件
3io.on("connection",function(socket){
4 console.log("1個客戶端鏈接了");
5 socket.on("tiwen",function(msg){
6 console.log("本服務器獲得了一個提問" + msg);
7 socket.emit("huida","吃了");
8 });
9});
每個鏈接上來的用戶，都有一個socket。因爲咱們的emit語句，是socket.emit()發出的，因此指的是向這個客戶端發出語句。

廣播，就是給全部當前鏈接的用戶發送信息：1//建立一個io對象 2var io = require('socket.io')(server);3//監聽鏈接事件4io.on("connection",function(socket){5 console.log("1個客戶端鏈接了");6 socket.on("tiwen",function(msg){7 console.log("本服務器獲得了一個提問" + msg);8 io.emit("huida","吃了");9 });10});

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。