HTML网页+nodejs实现websocket

来源：互联网发布：网络的利与弊素材编辑：程序博客网时间：2024/05/18 02:31

本程序利用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').onclick=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>中就可以，不知道为什么

阅读全文

0 0