WebSocket使用案例
生活随笔
收集整理的這篇文章主要介紹了
WebSocket使用案例
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
WebSocket使用案例
目錄
web客戶端 websocket
nodejs服務(wù)器端websocket
websocket案例
對(duì)于WebRTC項(xiàng)目而言，nodejs主要是實(shí)現(xiàn)信令服務(wù)器的功能，客戶端和服務(wù)器端的交互我們選擇websocket作為通信協(xié)議。
1. web客戶端 websocket
1. WebSocket 屬性
2. WebSocket 事件
3. WebSocket 方法
2. nodejs服務(wù)器端websocket
官方參考：https://www.npmjs.com/package/nodejs-websocket
我們只要關(guān)注：
（1）如何創(chuàng)建websocket服務(wù)器，通過createServer和listen接口；
（2）如何判斷有新的連接進(jìn)來，createServer的回調(diào)函數(shù)判斷；
（3）如何判斷關(guān)閉事件，通過on(“close”, callback) 事件的回調(diào)函數(shù)；
（4）如何判斷接收到數(shù)據(jù)，通過on(“text”, callkback)事件的回調(diào)函數(shù)；
（5）如何判斷接收異常，通過on(“error”, callkback)事件的回調(diào)函數(shù)；
（6）如何主動(dòng)發(fā)送數(shù)據(jù)，調(diào)用sendText
代碼示例：
3. websocket案例
1. 客戶端代碼
<html> <head><meta charset="UTF-8"><title>webrtc demo</title> </head><body><h1>Websocket簡(jiǎn)易聊天</h1><div id="app"><input id="sendMsg" type="text" /><button id="submitBtn">發(fā)送</button></div> </body> <script type="text/javascript">//在頁面顯示聊天內(nèi)容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);}//新建一個(gè)websocketvar websocket = new WebSocket("ws://127.0.0.1:8099");//打開websocket連接websocket.onopen = function () {console.log("已經(jīng)連上服務(wù)器----");document.getElementById("submitBtn").onclick = function () {var txt = document.getElementById("sendMsg").value;if (txt) {//向服務(wù)器發(fā)送數(shù)據(jù)websocket.send(txt);}};};//關(guān)閉連接websocket.onclose = function () {console.log("websocket close");};//接收服務(wù)器返回的數(shù)據(jù)websocket.onmessage = function (e) {var mes = JSON.parse(e.data); // json格式showMessage(mes.data, mes.type);}; </script></html>2. 服務(wù)端代碼
var ws = require("nodejs-websocket") var port = 8099; var user = 0;// 創(chuàng)建一個(gè)連接 var server = ws.createServer(function (conn) {console.log("創(chuàng)建一個(gè)新的連接--------");user++;conn.nickname="user" + user;conn.fd="user" + user;var mes = {};mes.type = "enter";mes.data = conn.nickname + " 進(jìn)來啦"broadcast(JSON.stringify(mes));//向客戶端推送消息conn.on("text", function (str) {console.log("回復(fù) "+str)mes.type = "message";mes.data = conn.nickname + " 說: " + str;broadcast(JSON.stringify(mes));});//監(jiān)聽關(guān)閉連接操作conn.on("close", function (code, reason) {console.log("關(guān)閉連接");mes.type = "leave";mes.data = conn.nickname+" 離開了"broadcast(JSON.stringify(mes));});//錯(cuò)誤處理conn.on("error", function (err) {console.log("監(jiān)聽到錯(cuò)誤");console.log(err);}); }).listen(port);function broadcast(str){server.connections.forEach(function(connection){connection.sendText(str);}) }3. 效果展示
4. websocket部署在阿里云連接不上？
總結(jié)
以上是生活随笔為你收集整理的WebSocket使用案例的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： webrtc简单案例——音视频采集和播放
- 下一篇： webrtc一对一通话