我的第一个NodeJS WebSocket程序

最新推荐文章于 2023-11-27 19:04:20 发布

kagula086

最新推荐文章于 2023-11-27 19:04:20 发布

阅读量531

点赞数

分类专栏： NodeJS JavaScript或前端

本文链接：https://blog.csdn.net/lee353086/article/details/78616410

版权

JavaScript或前端同时被 2 个专栏收录

44 篇文章 2 订阅

订阅专栏

NodeJS

4 篇文章 0 订阅

订阅专栏

Title:我的第一个NodeJS WebSocket程序
Date: 2017-11-15
Author: kagula
Environment:
[1]Windows10/Windows7
[2]Git-2.15.0-64-bit.exe
[3]node-v8.9.1-x64.msi
[4]bower 1.8.2

[5]Visual Studio Code

[6]Chrome 61.0.x

Introduction:
收到用户发上来的http请求后，把消息分发给所有的Web socket客户端，这里直接上代码。

下次要用的时候可以很快找到。

Content
前端代码在我本机的全路径为“D:\workspace_js\testWS\public\view\index.html”

<html>
<head>
    <link rel="stylesheet" href="/css/external/bootstrap.css"> 
    
    <script src="/js/external/jquery.js" type="text/javascript"></script>
    <script src="/js/external/bootstrap.js"></script>
    <script>
    var ws = new WebSocket("ws://localhost:8001");
    ws.onopen = function (e) {
        console.log('Connection to server opened');
    }
    ws.onmessage = function (evt) {  
          writeToScreen("Received message: " + evt.data);  
          //echo_websocket.close();  
    };  
    function sendMessage() {
        ws.send($('#message').val());
    }
    function writeToScreen(msg)
    {
        var pre = document.createElement("p");  
        pre.style.wordWrap = "break-word";  
        pre.innerHTML = msg;  
        //output.appendChild(pre); //插入到最后一行。
        $("#output").prepend(pre);//插入到第一行。
    }
    </script>
</head>

<body >
    <div class="vertical-center">
        <div class="container">
            <p> </p>
            <form role="form" id="chat_form" οnsubmit="sendMessage(); return false;">
                <div class="form-group">
                    <input class="form-control" type="text" name="message" id="message"
                           placeholder="Type text to echo in here" value="" />
                </div>
                <button type="button" id="send" class="btn btn-primary"
                        οnclick="sendMessage();">
                    Send!
                </button>
            </form>
        </div>
    </div>
    <div id="output"></div>
</body>
</html>

后台代码在我机器中的全路径为“D:\workspace_js\testWS\app.js”

var express = require('express');//引入express模块  
var app = express();//创建应用  

var bodyParser = require('body-parser');
var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();

var app = express();//创建应用  
app.use(bodyParser.json({limit:'1mb'}));
app.use(bodyParser.urlencoded({    
    extended: true
  }));
  
//定义public路径  
var pub = __dirname + '/public';  
app.use(express.static(pub));//设置静态目录为pubic  

//定义address映射  
app.get('/', function(req, res){  
    res.sendFile('public/view/index.html', { root: __dirname });  
}); 

//http://localhost/sendMessage?message=abc
app.get('/sendMessage',function(req,res)
{
    console.log("get method:message=" + req.query.message);
    broadcast(req.query.message);
    res.send({code:0});
});

app.post('/sendMessage',function(req,res)
{//x-www-form-urlencoded方式
    console.log("post method:message=" + req.body.message);
    broadcast(req.body.message);
    res.send({code:0});
});


app.listen(8080);  
console.log('Express started on port 8080');  


var wsServer = require('ws').Server;
var wss = new wsServer({ port: 8001 });

//  
wss.broadcast = function broadcast(message) {  
    // console.log(ws);  
    // debugger;  
    wss.clients.forEach(function each(client) {  
        client.send(message);
    });  
};  

//
wss.on('connection', function (ws) {
    console.log('client connected');
    ws.on('message', function (message) {
        console.log(message);
    });
});

function broadcast(message) {
    wss.broadcast(message);
}

做关联用的bat文件（仅做参考）

SET MYPATH=D:\workspace_js\testWS

mklink /H  %MYPATH%\public\css\external\bootstrap.css %MYPATH%\bower_components\bootstrap\dist\css\bootstrap.css

mklink /H  %MYPATH%\public\js\external\angular.js %MYPATH%\bower_components\angular\angular.js
mklink /H  %MYPATH%\public\js\external\jquery.js %MYPATH%\bower_components\jquery\dist\jquery.js
mklink /H  %MYPATH%\public\js\external\bootstrap.js %MYPATH%\bower_components\bootstrap\dist\js\bootstrap.js

测试方式：

第一步：

打开浏览器，访问http://localhost:8080/

第二步：

新建Tab，参考下面的地址

http://localhost:8080/sendMessage?message=mymessage5

提交要群发的信息，也可以借助postman工具以post方式提交。

最后：

在

http://localhost:8080/

Tab上看到采用http方式提交的数据，测试完毕。