我的第一个NodeJS WebSocket程序

来源：互联网发布：淘宝众筹的产品怎么样编辑：程序博客网时间：2024/06/14 09:10

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" onsubmit="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"                        onclick="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=abcapp.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\testWSmklink /H  %MYPATH%\public\css\external\bootstrap.css %MYPATH%\bower_components\bootstrap\dist\css\bootstrap.cssmklink /H  %MYPATH%\public\js\external\angular.js %MYPATH%\bower_components\angular\angular.jsmklink /H  %MYPATH%\public\js\external\jquery.js %MYPATH%\bower_components\jquery\dist\jquery.jsmklink /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方式提交的数据，测试完毕。

阅读全文

0 0