基于node.js的websocket 前后端交互小功能

最新推荐文章于 2022-09-28 09:58:48 发布

weixin_30480075

最新推荐文章于 2022-09-28 09:58:48 发布

阅读量185

点赞数

CC 4.0 BY-SA版权

文章标签：网络 json javascript ViewUI

原文链接：http://www.cnblogs.com/zhuxingqing/p/11482180.html

本文介绍了一个使用Node.js和HTML实现的WebSocket客户端与服务器交互的完整示例。通过此示例，用户可以在HTML页面中输入消息并发送给服务器，服务器接收到消息后将返回确认信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、node

var ws = require("nodejs-websocket");
console.log("开始建立连接...")

var server = ws.createServer(function(conn){
    conn.on("text", function (str) {
        console.log("收到的信息为:"+str)/*
        conn.sendText(str)*/

        //回调
        var backStr = 'get the str'
        conn.send(JSON.stringify(backStr))
        console.log('发送回调信息')
        
    })
    conn.on("close", function (code, reason) {
        console.log("关闭连接")
    });
    conn.on("error", function (code, reason) {
        console.log("异常关闭")
    });
}).listen(8001)
console.log("WebSocket建立完毕")

二、html

<!DOCTYPE html>
<html>
<head>
    <title>massage</title>
</head>
<body>
    <div>
        <input id="msg" type="text" name="">
    </div>
    <button id="sendMessage">发送消息给服务器</button>
    <div>
        <span>来自server:</span>
        <span id="serverMsg"></span>
    </div>
    <script type="text/javascript">
        window.onload = function () {
            var sendBtn = document.getElementById('sendMessage')
            sendBtn.addEventListener('click', function () {
                var msg = document.getElementById('msg')
                sendMessageToServer(msg.value);
            })

            function sendMessageToServer (msg) {
                msgJSON = JSON.stringify(msg)
                var socket = new WebSocket("ws://localhost:8001")
                console.log(socket)
                setTimeout( function () {
                    if (socket.readyState == WebSocket.OPEN) {
                        socket.send(msgJSON)
                    }else {
                        console.log("the socket is not open")
                    }
                    //接收server返回内容
                    socket.onmessage = function (event) {
                        console.log(event)
                        var backMsg = JSON.parse(event.data)
                        if (backMsg) {
                            document.getElementById('serverMsg').innerHTML = backMsg
                            console.log(backMsg)
                        }
                    }
                }, 500)
            }
        }
    </script>
</body>
</html>