NodeJs簡単なWebSocketのインスタントメッセージング
サーバー言語選択nodeJsについては、彼女が前にいたので、最初、他の言語と比較して、バックグラウンドを持つjavascriptをより身近に、あなたは自然に、nodeJsを好むでしょう
第二にNodeJs自身のイベント駆動型の方法は、多数のクライアントとの高い同時接続を維持するのは非常に良いです。だから私はNodeJsを選びました。
サーバーの実装は非常に簡単で、最初nodejs-のWebSocketと呼ばれるモジュールのnodeJsを、インストール、nodeJsコマンドラインで直接ノック:NPMインストールし、その上に入力しnodejs-のWebSocketをインストールし、
その後、我々はnodejs-のWebSocketモジュールので、サーバーを構築するために始めることができますので、自分自身を行うには多くの仕事を持っていない、直接ライン上のメソッドを呼び出すパッケージその他:
サーバ・コード
game2がある、game1であるかを決定するニュースクライアントによると、接続オブジェクトを保存します。
VaRのWSの=は、( "nodejs-のWebSocket")を必要とします。 console.log( "开始建立连接...") するvar game1 =ヌル、game2 =ヌル、game1Ready = falseを、game2Ready = falseは、 VARサーバ= ws.createServer(関数(CONN){ conn.on( "テキスト"、関数(STR){ にconsole.log( "收到的信息为:" + STR) IF(STR === "game1") { game1 = CONN; game1Ready = TRUE; conn.sendText( "成功"); } (STR === "game2")であれば{ game2 = CONN; game2Ready = TRUE; } (game1Ready && game2Ready){もし game2.sendText(STR) ; conn.on( "閉じる"、関数(コード、理由){ にconsole.log( "クローズ接続") }); conn.on( "エラー"、関数(コード、理由){ にconsole.log( "異常シャットダウン" ) }); })8001(聞く) はconsole.log( "完全なWebSocketを確立します")
[Game1コード]:サーバにクリックすることにより、3つのボックスの内容を取得します。
<!DOCTYPE HTML> <HTML LANG = "EN"> <HEAD> <メタ文字コード= "UTF-8"> <タイトル>ドキュメント</ TITLE> <スタイル> .kuang {テキスト整列:センター;マージントップ: 200pxの;} #mess {テキスト整列:センター} .VALUE {幅:200pxの、高さ:200pxの;ボーダー:1ピクセルの固体;テキスト整列:センター;行の高さ:200pxの;表示:インラインブロック;} </スタイル> </ HEAD> <BODY> の<divのid = "混乱">正在连接... </ div> <divのクラス= "国光客運"> <DIV CLASS = "値" ID = "VALUE1">小明小明</ DIV> <DIV CLASS = "値" ID = "value2の">大胸大胸</ div> <DIV CLASS = "値" ID = "値3">小张小张</ div> </ div> <SCRIPT> VAR混乱=のdocument.getElementById( "混乱")。 (window.WebSocket){IF VARのWebSocket新しい新しいWS =( '://192.168.17.80:WS 8001'); ws.onopen =関数(E){ にconsole.log( "正常に接続されているサーバ"); ws.send( ; "Game1") } {ws.onclose =関数(E) にconsole.log()が"サーバ閉鎖"; } ws.onerror =関数(){ にconsole.log( "接続エラー"); } ws.onmessage関数= (E){ mess.innerHTML = "接続成功" document.querySelector()のonclick =(E){機能"クァンを"。 VAR時間=新しいDate(); ws.send(時間+「game1点击了「 "+ e.target.innerHTML +"」 ")。 } } } </ SCRIPT> </ body> </ HTML>
[コード] game2:取得サービスプッシュ送信されたメッセージ、およびディスプレイ
<!DOCTYPE HTML> <HTML LANG = "EN"> <HEAD> <メタ文字コード= "UTF-8"> <タイトル>ドキュメント</ TITLE> <スタイル> .kuang {テキスト整列:センター;マージントップ: 200pxの;} #mess {テキスト整列:センター} </スタイル> </ head> <body> <DIV ID = "混乱"> </ div> <スクリプト> VAR混乱=のdocument.getElementById( "混乱")。 IF(window.WebSocket){ VARのWS =新規のWebSocket( 'WS://192.168.17.80:8001')。 ws.onopen =関数(E){ にconsole.log( "连接服务器成功")。 WS。( "game2")を送ります。 } ws.onclose =関数(E){ } ws.onerror =関数(){ にconsole.log( "接続エラー"); } ws.onmessage =関数(E){ VAR新しい新しい時間(日=); mess.innerHTML + =時間+ "メッセージ:" + + e.data "<BR>" } } </ SCRIPT> </ BODY> </ HTML>
実行ショット:
コードは非常に簡単です:コールnodejs-のWebSocketも非常に明確かつ簡潔で理解しやすい、特定のnodejs-のWebSocket APIを見ることができるhttps://www.npmjs.org/package/nodejs-websocket、
独自のテストを導入している、単にいくつかのメソッドを達成することができるなど、onMessageの、非常にシンプル開く時れるクライアントを達成することは容易です。
出典ます。https://www.cnblogs.com/axes/p/3586132.html
サーバー言語選択nodeJsについては、彼女が前にいたので、最初、他の言語と比較して、バックグラウンドを持つjavascriptをより身近に、あなたは自然に、nodeJsを好むでしょう
第二にNodeJs自身のイベント駆動型の方法は、多数のクライアントとの高い同時接続を維持するのは非常に良いです。だから私はNodeJsを選びました。
服务器的实现很简单,先装一个nodeJs的模块,叫nodejs-websocket , 直接在nodeJs命令行中敲入:npm install nodejs-websocket回车就可以安装好了,
然后就可以开始建立服务器了,因为有了nodejs-websocket模块,所以很多工作都不用我们自己做,直接调用别人封装好的方法就行了:
服务端代码
根据客户端传来的消息判断哪个是game1,哪个是game2,保存connection对象。
var ws = require("nodejs-websocket"); console.log("开始建立连接...") var game1 = null,game2 = null , game1Ready = false , game2Ready = false; var server = ws.createServer(function(conn){ conn.on("text", function (str) { console.log("收到的信息为:"+str) if(str==="game1"){ game1 = conn; game1Ready = true; conn.sendText("success"); } if(str==="game2"){ game2 = conn; game2Ready = true; } if(game1Ready&&game2Ready){ game2.sendText(str); } conn.sendText(str) }) conn.on("close", function (code, reason) { console.log("关闭连接") }); conn.on("error", function (code, reason) { console.log("异常关闭") }); }).listen(8001) console.log("WebSocket建立完毕")
【game1代码】:通过点击获取三个框的内容,传到服务器
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .kuang{text-align: center;margin-top:200px;} #mess{text-align: center} .value{width: 200px;height:200px;border:1px solid;text-align: center;line-height: 200px;display: inline-block;} </style> </head> <body> <div id="mess">正在连接...</div> <div class="kuang"> <div class="value" id="value1">小明小明</div> <div class="value" id="value2">大胸大胸</div> <div class="value" id="value3">小张小张</div> </div> <script> var mess = document.getElementById("mess"); if(window.WebSocket){ var ws = new WebSocket('ws://192.168.17.80:8001'); ws.onopen = function(e){ console.log("连接服务器成功"); ws.send("game1"); } ws.onclose = function(e){ console.log("服务器关闭"); } ws.onerror = function(){ console.log("连接出错"); } ws.onmessage = function(e){ mess.innerHTML = "连接成功" document.querySelector(".kuang").onclick = function(e){ var time = new Date(); ws.send(time + " game1点击了“" + e.target.innerHTML+"”"); } } } </script> </body> </html>
【game2代码】:获取服务推送来的消息,并且显示
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .kuang{text-align: center;margin-top:200px;} #mess{text-align: center} </style> </head> <body> <div id="mess"></div> <script> var mess = document.getElementById("mess"); if(window.WebSocket){ var ws = new WebSocket('ws://192.168.17.80:8001'); ws.onopen = function(e){ console.log("连接服务器成功"); ws.send("game2"); } ws.onclose = function(e){ console.log( "サーバ閉鎖"); } ws.onerror =関数(){ にconsole.log( "接続エラー"); } ws.onmessage =関数(E){ VAR新しい新しい時間(日=); mess.innerHTML + =時間+ "メッセージ:" + + e.data "<BR>" } } </ SCRIPT> </ BODY> </ HTML>
実行ショット:
コードは非常に簡単です:コールnodejs-のWebSocketも非常に明確かつ簡潔で理解しやすい、特定のnodejs-のWebSocket APIを見ることができるhttps://www.npmjs.org/package/nodejs-websocket、
独自のテストを導入している、単にいくつかのメソッドを達成することができるなど、onMessageの、非常にシンプル開く時れるクライアントを達成することは容易です。
出典ます。https://www.cnblogs.com/axes/p/3586132.html