Home > Article > Web Front-end > Sample code sharing for HTML5+NodeJs to implement WebSocket instant messaging

Sample code sharing for HTML5+NodeJs to implement WebSocket instant messaging

黄舟Original: 2017-03-22 15:23:594886browse

Statement: This article is an original article. If you need to reprint, please indicate the source WAxes, thank you!

Recently I have been learning HTML5 and making canvas games and the like. I found that in addition to canvas, a powerful tool in HTML5, WebSocket is also very useful. Worth noting. It can be used to make dual-screen interactive games. What is a dual-screen interactive game? It is to control PC web games through mobile devices. In this case, real-time communication will be used, and WebSocket is undoubtedly the most suitable. WebSocket has many advantages over HTTP. The main reason is that WebSocket only establishes a TCP connection and can actively push data to the client. It also has lighter protocol headers to reduce the amount of data transmission. Therefore, WebSocket is the best protocol for real-time communication for the time being.

As for the server language choice, nodeJs, firstly, because I am a front-end person and am familiar with javascript. Compared to other back-end languages, I will naturally prefer nodeJs. Secondly, NodeJs itself The event-driven approach is good at maintaining highly concurrent connections with a large number of clients. So I chose NodeJs.

The implementation of the server is very simple. First install a nodeJs module called nodejs-websocket. Directly type in the nodeJs command line: npm install nodejs-websocket and press Enter to install it. , and then you can start building the server. Because of the nodejs-websocket module, we don’t have to do a lot of work ourselves. We can just call the methods encapsulated by others directly:

　【 Server code], determine which one is game1 and which one is game2 based on the message from the client, and save the connection object.

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 code]: Get the contents of the three boxes by clicking and transfer them to the server

<!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(&#39;ws://192.168.17.80:8001&#39;);

            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 code]: Get the service Pushed message and display

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

Running screenshot：

The above is the detailed content of Sample code sharing for HTML5+NodeJs to implement WebSocket instant messaging. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：10 HTML5 code snippets ready to use in website production, detailed explanationNext article：10 HTML5 code snippets ready to use in website production, detailed explanation

See more

Sample code sharing for HTML5+NodeJs to implement WebSocket instant messaging

Related articles