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

一、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>

相关阅读:
3 面向过程与面向对象进一步比较
2 类、实例、属性、方法详解
1 面向对象介绍
CentOS5、6 NFS的安装配置及mount方法
js 冒泡捕获
js定义类或对象
new Option()——实现时间联动
js闭包(转)
(转)大型网站系统架构的演化
30款最好的 Bootstrap 3.0 免费主题和模板

原文地址：https://www.cnblogs.com/zhuxingqing/p/11482180.html