WebSocket 인스턴트 메시징을 구현하기 위한 HTML5+NodeJ에 대한 샘플 코드 공유
- 黄舟원래의
- 2017-03-22 15:23:594934검색
성명: 이 기사는 원본 기사입니다. 재인쇄가 필요한 경우 출처를 밝혀주세요. WAxes, 감사합니다!
최근에 저는 HTML5를 배우고 캔버스 게임 등을 만들면서 강력한 도구인 캔버스 외에 WebSocket도 매우 유용하다는 것을 알았습니다. HTML5에서 유용합니다. 듀얼 스크린 인터랙티브 게임을 만드는 데 사용할 수 있습니다. 듀얼 스크린 인터랙티브 게임이란 무엇입니까? 모바일 기기를 통해 PC 웹게임을 제어하는 것입니다. 이 경우 실시간 통신이 사용되며 의심할 여지없이 WebSocket이 가장 적합합니다. WebSocket은 HTTP에 비해 많은 장점이 있습니다. 주된 이유는 WebSocket이 TCP 연결만 설정하고 데이터를 클라이언트에 적극적으로 푸시할 수 있다는 점입니다. 또한 데이터 전송량을 줄이기 위해 더 가벼운 프로토콜 헤더도 있습니다. 따라서 WebSocket은 당분간 실시간 통신을 위한 최고의 프로토콜입니다.
서버 언어 선택은 일단 저는 프론트엔드 사람이고 자바스크립트에 익숙하기 때문에 다른 백엔드 언어에 비해 자연스럽게 nodeJ를 선호하게 됩니다. 둘째, NodeJ 자체 이벤트 중심 접근 방식은 많은 수의 클라이언트와의 동시 연결을 유지하는 데 좋습니다. 그래서 저는 NodeJ를 선택했습니다.
서버 구현은 매우 간단합니다. 먼저 nodejs-websocket이라는 nodeJs 모듈을 설치합니다. nodeJs 명령줄에 npm install nodejs-websocket을 직접 입력하고 Enter를 눌러 설치합니다. . 그러면 서버 구축을 시작할 수 있습니다. nodejs-websocket 모듈 덕분에 우리는 다른 사람이 패키지한 메서드를 직접 호출할 수 있습니다.
【 서버 코드] 클라이언트의 메시지를 바탕으로 어느 것이 game1이고 어느 것이 game2인지 판단하고 연결 개체를 저장합니다.
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>
<p id="mess">正在连接...</p>
<p class="kuang">
<p class="value" id="value1">小明小明</p>
<p class="value" id="value2">大胸大胸</p>
<p class="value" id="value3">小张小张</p>
</p>
<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 코드] : 서비스 푸시 메시지를 받고
ffd43448117c1013fbeeed3f564491ad9fd01892b579bba0c343404bcccd70fb93f0f5c25f18dab9d176bd4f6de5d30e
a80eb7cbb6fff8b0ff70bae37074b813
b2386ffb911b14667cb8f0f91ea547a7Document6e916e0f7d1e588d4f442bf645aedb2f
c9ccee2e6ea535a969eb3f532ad9fe89
.kuang{text-align: center;margin-top:200px;}
#mess{text-align: center}
531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86d
963b0312ee50121d74194483b657223d94b3e26ee717c64999d7867364b1b4a3
3f1c4e4b6b16bbbd69b2ee476dc4f83a
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 = function(){
console.log("连接出错");
}
ws.onmessage = function(e){
var time = new Date();
mess.innerHTML+=time+"的消息："+e.data+"0c6dc11e160d3b678d68754cc175188a"
}
} 2cacc6d41bbb37262a98f745aa00fbf036cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e
실행 스크린샷 을 표시합니다. 
:
위 내용은 WebSocket 인스턴트 메시징을 구현하기 위한 HTML5+NodeJ에 대한 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!