摘要:是,是的,它可以建立起一個基于事件的實時的雙向交流方式,極大的簡化了的處理過程。開始搭建這個應用幾乎只需要和最初級的知識,因為只搭建一個基本的程序。安裝好后創建一個,來配置應用。
WebSocket與Socket.IO
WebSocket是一種協議,有了它就可以在TCP協議的基礎上在瀏覽器和服務器之間建立起了一種全雙工的通道,它完全兼容HTTP協議,有了它使得Web應用程序可以在瀏覽器和服務器之間進行實時的交互,現在主流瀏覽器都支持這種協議。
Socket.IO是JavaScript library,是Node.js的module,它可以建立起一個基于事件的實時的雙向交流方式,極大的簡化了WebSocket的處理過程。在這個Chat application中將會用到它。
開始Chat application搭建這個應用幾乎只需要Node.js和Socket.IO最初級的知識,因為只搭建一個基本的程序。
web 框架最初的構想是一個簡單的HTML頁面,由一個表單和消息列表組成,要使用Node.js和express框架,首先確保Node.js已經安裝好了。
首先創建項目目錄chat-example文件夾,然后在里邊創建package.json文件來描述項目信息以及依賴。
{ "name": "socket-chat-example", "version": "0.0.1", "description": "my first socket.io app", "dependencies": {} }
然后到命令行cd到項目目錄安裝express,npm install --save express
--save參數可以把自動把express添加到package.json的dependencies中。
express安裝好后創建一個index.js,來配置應用。
//index.js var app = require("express")(); var http = require("http").Server(app); app.get("/", function(req, res){ res.send("Hello world
"); }); http.listen(3000, function(){ console.log("listening on *:3000"); });
上邊代碼可以這樣翻譯一下:
Express初始化了一個函數句柄可以應用于HTTP server于第2行
定義一個路由來訪問網站首頁
開啟http服務監聽3000端口
在命令行中node index.js得到如下結果:
到瀏覽器中訪問http://localhost:3000結果如下:
之前我們使用res.send("
首先來重構之前的路由:
app.get("/", function(req, res){ res.sendFile(__dirname + "/index.html"); });
然后創建index.html
Socket.IO chat
重啟服務,到瀏覽器查看是這個樣子:
Socket.IO由2部分組成:
服務端Node.JS HTTP Server: socket.io
瀏覽器端的js庫:socket.io-client
接下來npm install --save socket.io添加模塊
然后編輯index.js中的內容如下:
var app = require("express")(); var http = require("http").Server(app); var io = require("socket.io")(http); app.get("/", function(req, res){ res.sendFile(__dirname + "/index.html"); }); io.on("connection", function(socket){ console.log("a user connected"); }); http.listen(3000, function(){ console.log("listening on *:3000"); });
注意通過把http(the HTTP server)對象傳遞給socket.io初始化了一個socket.io的實例,然后監聽connection事件,并且在控制臺中打印出來
在index.html的
之前增加如下幾行:
這就是用來加載socket.io-client的,暴露出一個全局的io,然后connect
注意我調用io()的時候并沒有指定任何的URL,因為它默認就是去當前跑的頁面去和server連接
重啟服務,多開幾個頁面,在控制臺中可以看到如下結果:
每個socket還有一個特殊的disconnect事件:
io.on("connection", function(socket){ console.log("a user connected"); socket.on("disconnect", function(){ console.log("user disconnected"); }); });發射事件
Socket.IO的主要想法就是你能夠發射和接收任何你喜歡的事件,任何對象都會被編碼成Json,也支持二進制數據
那接下來就做我們發送信息的時候server接收到chat message事件,index.html中的script部分改寫如下:
在index.js中我們打印出chat message事件
io.on("connection", function(socket){ socket.on("chat message", function(msg){ console.log("message: " + msg); }); });
在瀏覽器端發射,控制臺觀察如下:
接下來的目標是從server發送消息給其余的在線用戶,為了能把消息傳遞給everyone,Socket.IO給我們提供了io.emit
io.emit("some event", { for: "everyone" });
如果你想發消息給everyone,除去一個特定的socket,那就快用broadcast 標志吧
io.on("connection", function(socket){ socket.broadcast.emit("hi"); });
像下面這樣就能把消息發給所有人,包括消息的發送者
io.on("connection", function(socket){ socket.on("chat message", function(msg){ io.emit("chat message", msg); }); });
下面到客戶端捕獲chat message事件,把消息內容插到消息列表中:
到瀏覽器多開幾個選項卡就可以瘋狂的發射和接收消息了,非常實時,短短20幾行代碼就能實現這樣的效果,真是令人發指啊!
總結哈哈,其實這個例子是socket.io官網的小栗子,喜歡學英語的朋友可以去玩一下,那里的video演示很直觀,你可以戳這里socket.io-Chat
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/82953.html
摘要:本文實際為翻譯官方教程開始吧,我們做個聊天應用在這個教程里,我們將制作一個簡單的網頁聊天應用。它機會不要求你有任何關于或的基礎,所以這份教程適合任何水平的開發者。介紹曾經寫一個網頁聊天應用可能會用到網頁工具套件,那時候非常困難。 本文實際為翻譯Socket.io官方教程——《Get Started: Chat application》 開始吧,我們做個聊天應用! 在這個教程里,我們將制...
摘要:但是需要注意的一點是協議是建立在協議基礎之上的,需要經過一次握手。所以連接的發起方仍是客戶端。是一個簡潔而靈活的應用框架提供一系列強大特性幫助你創建各種應用。這也是為什么要采用協議來實現聊天室的原因。 從開始寫到完善差不多斷斷續續差不多半個月時間,雖然還沒有打到想要的效果但還是階段性總結一下。(下一步加入打算視頻通訊功能)本文默認你已掌握 node 相關基礎知識 GitHub地址:ht...
摘要:用實現聊天服務器搭建創建一個服務監聽服務端口服務端已經啟動請訪問客戶端服務搭建與服務端通信我們要建立服務端請求連接斷開連接客戶端建立連接客戶端向服務端發送請求觸發事件接收客戶端的信息將服務端的數據廣播到客戶端去客戶端接收服務 node.js 用socket實現聊天 服務器搭建 app.js const http = require(http); const express = requ...
摘要:收到包后,向發送一個值為,該包發送完成后,和均進入狀態。非強制壓縮發送。因此也就誕生了一個新的通信協議協議,一種全雙工通信協議。會發起一個握手的請求,請求首部含有還有其他首部,具體看如下示例。服務器端返回一個狀態碼,確認轉換協議。 首先說明:這里的tomcat用的是tomcat8.0.36,并不適合tomcat7以及以下版本,(沒辦法websocket的api一直在變,到8之后貌似穩定...
閱讀 3601·2020-12-03 17:42
閱讀 2770·2019-08-30 15:54
閱讀 2227·2019-08-30 15:44
閱讀 574·2019-08-30 14:08
閱讀 974·2019-08-30 14:00
閱讀 1108·2019-08-30 13:46
閱讀 2792·2019-08-29 18:33
閱讀 2909·2019-08-29 14:11