HTML网页+nodejs实现websocket

最新推荐文章于 2024-08-17 08:30:00 发布

申小远

最新推荐文章于 2024-08-17 08:30:00 发布

阅读量3.1k

点赞数

分类专栏： nodejs 文章标签： websocket html nodejs

本文链接：https://blog.csdn.net/u013749068/article/details/78181658

版权

nodejs 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本程序利用HTML5和nodejs中封装好的websocketAPI实现了简单的功能，作此笔记

功能简单，就是向后台发送输入框中的内容，然后后台再把接收到的消息传回前端显示出来，具体代码如下：

HTML网页代码：

<!doctype html>
<html>
    <head>
        <meta charset='utf-8'>
        
    </head>
    <body>
        <button id='send'>发送</button>
        <input type='text' id='inputText'>
        <p id='dispStatus'>正在连接...</p>
        <script>
                var inputText=document.getElementById('inputText');//读输入框的句柄
                var dispStatus=document.getElementById('dispStatus');//读按钮的句柄
                var ws=new WebSocket('ws://10.138.244.142:8000');//创建websocket连接，，服务端的IP+端口号
                ws.onopen=function(e){//开始创建连接时的事件，显示连接成功
                    dispStatus.innerHTML='连接成功';
                }
                document.getElementById('send').οnclick=function(e){//按钮按下触发事件，
                    ws.send(inputText.value);//按下按钮向服务端发送输入框中的值
                }

                ws.onmessage=function(e){//读取服务端接收到的信息
                    dispStatus.innerHTML=e.data;//将信息显示出来
                }
            </script>
    </body>
</html>

nodejs后台代码：

var ws=require("nodejs-websocket");//引入websocket模块
console.log("开始建立连接...");//后台打印状态信息
var server=ws.createServer(function(connect){//创建一个新连接
    connect.on("text",function(msg){//接收触发事件
        console.log("收到的消息是："+msg);//接收到新消息之后在后台打印出来
        if(msg){//如果消息不是空，将接收到的消息发送给客户端
            connect.send('接收到的消息是：'+msg);
        }
    });
}).listen(8000)

在此过程中遇到的问题，HTML代码中<script>脚本程序放在<head>中不能用，一直连接不上后台，但是放在<body>中就可以，不知道为什么