WebSocket学习(三)——使用nodejs搭建WebSocket服务器


Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。

我有篇文章讲了下用nodejs搭建http服务器(关联文章)

下面讲下用nodejs搭建WebSocket服务器

1、首先用cmd打开控制台 输入nmp install websocket

2、编写一个wsServer.js文件

// 引入WebSocket模块
var ws = require('nodejs-websocket')
var PORT = 3000

// on就是addListener,添加一个监听事件调用回调函数
// Scream server example:"hi"->"HI!!!",服务器把字母大写
var server = ws.createServer(function(conn){
    console.log('New connection')
    conn.on("text",function(str){
        console.log("Received"+str)
        // conn.sendText(str.toUpperCase()+"!!!") //大写收到的数据
        conn.sendText(str)  //收到直接发回去
    })
    conn.on("close",function(code,reason){
        console.log("connection closed")
    })
    conn.on("error",function(err){
        console.log("handle err")
        console.log(err)
    })
}).listen(PORT)

console.log('websocket server listening on port ' + PORT)
这个服务器实现了把客户端传入的小写字母转换为大写

如注释,先要引入WebSocket模块,然后创建一个服务,并为其添加一个监听,其中自带了一些事件的监听,如text、close、error,用sendText()发送数据

通过从cmd用node wsSocket启动服务器

3、前台界面编写

在之前WebSocket学习(二)——使用官方的服务器实现WebSocket的基础上改动一点

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>WebSocket</title>
</head>
<body>
    <h1>Echo Test</h1>
    <input id="sendTxt" type="text"/>
    <button id="sendBtn">发送</button>
    <div id="recv"></div>
    <script type="text/javascript">
        // //官方示例的服务器
        // var WebSocket = new WebSocket("ws://echo.websocket.org");
        // wsServer搭建的服务器
        var WebSocket = new WebSocket("ws://localhost:3000/");
        WebSocket.onopen = function(){
            console.log('websocket open');
            document.getElementById("recv").innerHTML = "Connected";
        }
        WebSocket.onclose = function(){
            console.log('websocket close');
        }
        WebSocket.onmessage = function(e){
            console.log(e.data);
            document.getElementById("recv").innerHTML = e.data;
        }
        document.getElementById("sendBtn").onclick = function(){
            var txt = document.getElementById("sendTxt").value;
            WebSocket.send(txt);
        }
    </script>
</body>
</html>
可以看到把服务器的地址改为本机了

智能推荐

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告