首页
所有分类
TAGS
文字工具 EMOJI BIBLE
服务器 NodeJs

用nodejs搭建websocket服务器

Posted in NodeJs onJanuary 23, 2017

 简单开始

1.安装node。https://nodejs.org/en/ 

2.安装ws模块

ws：是nodejs的一个WebSocket库，可以用来创建服务。 https://github.com/websockets/ws

用nodejs搭建websocket服务器

3.server.js

在项目里面新建一个server.js，创建服务，指定8181端口，将收到的消息log出来。

var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({ port: 8181 });
wss.on('connection', function (ws) {
  console.log('client connected');
  ws.on('message', function (message) {
    console.log(message);
  });
});

4.建立一个client.html。

在页面上建立一个WebSocket的连接。用send方法发送消息。

var ws = new WebSocket("ws://localhost:8181");
  ws.onopen = function (e) {
    console.log('Connection to server opened');
  }
  function sendMessage() {
    ws.send($('#message').val());
  }

页面： 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>WebSocket Echo Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link href="../bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet" />
  <script src="../js/jquery-1.12.3.min.js"></script>
  <script src="../js/jquery-1.12.3.min.js"></script>
  <script src="../bootstrap-3.3.5/js/bootstrap.min.js"></script>
  <script>
  var ws = new WebSocket("ws://localhost:8181");
  ws.onopen = function (e) {
    console.log('Connection to server opened');
  }
  function sendMessage() {
    ws.send($('#message').val());
  }
  </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>
</body>
</html>

运行之后如下，服务端即时获得客户端的消息。

用nodejs搭建websocket服务器

模拟股票

上面的例子很简单，只是为了演示如何运用nodejs的ws创建一个WebSocket服务器。且可以接受客户端的消息。那么下面这个例子演示股票的实时更新。客服端只需要连接一次，服务器端会不断地发送新数据，客户端收数据后更新UI.页面如下，有五只股票，开始和停止按钮测试连接和关闭。

用nodejs搭建websocket服务器

 服务端：

 1.模拟五只股票的涨跌。

var stocks = {
  "AAPL": 95.0,
  "MSFT": 50.0,
  "AMZN": 300.0,
  "GOOG": 550.0,
  "YHOO": 35.0
}
function randomInterval(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}
var stockUpdater;
var randomStockUpdater = function() {
  for (var symbol in stocks) {
    if(stocks.hasOwnProperty(symbol)) {
      var randomizedChange = randomInterval(-150, 150);
      var floatChange = randomizedChange / 100;
      stocks[symbol] += floatChange;
    }
  }
  var randomMSTime = randomInterval(500, 2500);
  stockUpdater = setTimeout(function() {
    randomStockUpdater();
  }, randomMSTime);
}
randomStockUpdater();

2.连接建立之后就开始更新数据

wss.on('connection', function (ws) {
  var sendStockUpdates = function (ws) {
    if (ws.readyState == 1) {
      var stocksObj = {};
      for (var i = 0; i < clientStocks.length; i++) {
       var symbol = clientStocks[i];
        stocksObj[symbol] = stocks[symbol];
      }
      if (stocksObj.length !== 0) {
        ws.send(JSON.stringify(stocksObj));//需要将对象转成字符串。WebSocket只支持文本和二进制数据
        console.log("更新", JSON.stringify(stocksObj));
      }
      
    }
  }
  var clientStockUpdater = setInterval(function () {
    sendStockUpdates(ws);
  }, 1000);
  ws.on('message', function (message) {
    var stockRequest = JSON.parse(message);//根据请求过来的数据来更新。
    console.log("收到消息", stockRequest);
    clientStocks = stockRequest['stocks'];
    sendStockUpdates(ws);
  });

客户端：

建立连接：

var ws = new WebSocket("ws://localhost:8181");

onopen直接只有在连接成功后才会触发，在这个时候将客户端需要请求的股票发送给服务端。

var isClose = false;
  var stocks = {
    "AAPL": 0, "MSFT": 0, "AMZN": 0, "GOOG": 0, "YHOO": 0
  };
  function updataUI() {
    ws.onopen = function (e) {
      console.log('Connection to server opened');
      isClose = false;
      ws.send(JSON.stringify(stock_request));
      console.log("sened a mesg");
    }
    //更新UI
    var changeStockEntry = function (symbol, originalValue, newValue) {
      var valElem = $('#' + symbol + ' span');
      valElem.html(newValue.toFixed(2));
      if (newValue < originalValue) {
        valElem.addClass('label-danger');
        valElem.removeClass('label-success');
      } else if (newValue > originalValue) {
        valElem.addClass('label-success');
        valElem.removeClass('label-danger');
      }
    }
    // 处理受到的消息
    ws.onmessage = function (e) {
      var stocksData = JSON.parse(e.data);
      console.log(stocksData);
      for (var symbol in stocksData) {
        if (stocksData.hasOwnProperty(symbol)) {
          changeStockEntry(symbol, stocks[symbol], stocksData[symbol]);
          stocks[symbol] = stocksData[symbol];
        }
      }
    };
  }

  updataUI();

运行效果如下：只需要请求一次，数据就会不断的更新，效果是不是很赞，不用轮询，也不用长连接那么麻烦了。文章末尾会附上所有源码。

（美股的涨跌和A股的颜色是反的，即红跌绿涨）

用nodejs搭建websocket服务器

实时聊天

上面的例子是连接建立之后，服务端不断给客户端发送数据。接下来例子是一个简单的聊天室类的例子。可以建立多个连接。

1.安装node-uuid模块，用来给每个连接一个唯一号。

用nodejs搭建websocket服务器

2.服务端消息发送

消息类型分notification和message两种，前者是提示信息，后者是聊天内容。消息还包含一个id、昵称和消息内容。在上一节有学习到readyState有四个值，OPEN表示连接建立可以发送消息。如果页面关闭了，为WebSocket.CLOSE。

function wsSend(type, client_uuid, nickname, message) {
  for (var i = 0; i < clients.length; i++) {
    var clientSocket = clients[i].ws;
    if (clientSocket.readyState === WebSocket.OPEN) {
      clientSocket.send(JSON.stringify({
        "type": type,
        "id": client_uuid,
        "nickname": nickname,
        "message": message
      }));
    }
  }
}

3.服务端处理连接

每新增加一个连接，都会发送一条匿名用户的加入的提示消息，如果消息中带有“/nick” 认为这一个修改昵称的消息。然后更新客户端的昵称。其他都会当做聊天消息处理。

wss.on('connection', function(ws) {
  var client_uuid = uuid.v4();
  var nickname = "AnonymousUser" + clientIndex;
  clientIndex += 1;
  clients.push({ "id": client_uuid, "ws": ws, "nickname": nickname });
  console.log('client [%s] connected', client_uuid);
  var connect_message = nickname + " has connected";
  wsSend("notification", client_uuid, nickname, connect_message);
  console.log('client [%s] connected', client_uuid);
  ws.on('message', function(message) {
    if (message.indexOf('/nick') === 0) {
      var nickname_array = message.split(' ');
      if (nickname_array.length >= 2) {
        var old_nickname = nickname;
        nickname = nickname_array[1];
        var nickname_message = "Client " + old_nickname + " changed to " + nickname;
        wsSend("nick_update", client_uuid, nickname, nickname_message);
      }
    } else {
      wsSend("message", client_uuid, nickname, message);
    }
  });

处理连接关闭：

var closeSocket = function(customMessage) {
    for (var i = 0; i < clients.length; i++) {
      if (clients[i].id == client_uuid) {
        var disconnect_message;
        if (customMessage) {
          disconnect_message = customMessage;
        } else {
          disconnect_message = nickname + " has disconnected";
        }
        wsSend("notification", client_uuid, nickname, disconnect_message);
        clients.splice(i, 1);
      }
    }
  };
  ws.on('close', function () {
    closeSocket();
  });

4.客户端

 没有启动时，页面如下，change按钮用来修改昵称。

用nodejs搭建websocket服务器

<div class="vertical-center">
    <div class="container">
      <ul id="messages" class="list-unstyled"></ul>
      <hr/>
      <form role="form" id="chat_form" onsubmit="sendMessage(); return false;">
        <div class="form-group">
          <input class="form-control" type="text" id="message" name="message"
              placeholder="Type text to echo in here" value="" autofocus/>
        </div>
        <button type="button" id="send" class="btn btn-primary"
            onclick="sendMessage();">
          Send Message
        </button>

      </form>
      <div class="form-group"><span>nikename：</span><input id="name" type="text" /> <button class="btn btn-sm btn-info" onclick="changName();">change</button></div>
    </div>
  </div>

js:

//建立连接
    var ws = new WebSocket("ws://localhost:8181");
    var nickname = "";
    ws.onopen = function (e) {
      console.log('Connection to server opened');
    }
    //显示
    function appendLog(type, nickname, message) {
      if (typeof message == "undefined") return;
      var messages = document.getElementById('messages');
      var messageElem = document.createElement("li");
      var preface_label;
      if (type === 'notification') {
        preface_label = "<span class=\"label label-info\">*</span>";
      } else if (type == 'nick_update') {
        preface_label = "<span class=\"label label-warning\">*</span>";
      } else {
        preface_label = "<span class=\"label label-success\">"
        + nickname + "</span>";
      }
      var message_text = "<h2>" + preface_label + "  "
      + message + "</h2>";
      messageElem.innerHTML = message_text;
      messages.appendChild(messageElem);
    }
    //收到消息处理
    ws.onmessage = function (e) {
      var data = JSON.parse(e.data);
      nickname = data.nickname;
      appendLog(data.type, data.nickname, data.message);
      console.log("ID: [%s] = %s", data.id, data.message);
    }
    ws.onclose = function (e) {
      appendLog("Connection closed");
      console.log("Connection closed");
    }
    //发送消息
    function sendMessage() {
      var messageField = document.getElementById('message');
      if (ws.readyState === WebSocket.OPEN) {
        ws.send(messageField.value);
      }
      messageField.value = '';
      messageField.focus();
    }
    //修改名称
    function changName() {
      var name = $("#name").val();
      if (ws.readyState === WebSocket.OPEN) {
        ws.send("/nick " + name);
      }
    }

 运行结果：

 页面关闭之后，连接马上断开。

用nodejs搭建websocket服务器

 这种实时响应的体验简直不能太爽，代码也清爽了，前端体验也更好，客户端不用一直发请求，服务端不用等着被轮询。

 小结：上面例子的代码都很好理解，接下来学习WebSocket协议。

demo下载：http://xiazai.3water.com/201701/yuanma/websocket_3water.rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

用nodejs搭建websocket服务器

- Author -

stoneniqiu

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

NodeJs 相关文章推荐
NodeJS的模块写法入门(实例代码)
Mar 07 NodeJs
基于NodeJS的前后端分离的思考与实践（二）模版探索
Sep 26 NodeJs
NodeJS创建最简单的HTTP服务器
May 15 NodeJs
详解nodejs模板引擎制作
Jun 14 NodeJs
nodejs socket服务端和客户端简单通信功能
Sep 14 NodeJs
nodejs实现套接字服务功能详解
Jun 21 NodeJs
NodeJS实现自定义流的方法
Aug 01 NodeJs
nodejs异步编程基础之回调函数用法分析
Dec 26 NodeJs
nodejs二进制与Buffer的介绍与使用
Jul 11 NodeJs
nodejs制作小爬虫功能示例
Feb 24 NodeJs
如何利用nodejs实现命令行游戏
Nov 24 NodeJs
详解NodeJS模块化
Jun 15 NodeJs
NodeJS遍历文件生产文件列表功能示例
Jan 22 #NodeJs
nodejs实现发出蜂鸣声音(系统报警声)的方法
Jan 18 #NodeJs
nodejs的压缩文件模块archiver用法示例
Jan 18 #NodeJs
nodejs 实现钉钉ISV接入的加密解密方法
Jan 16 #NodeJs
简单实现nodejs上传功能
Jan 14 #NodeJs
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
Jan 12 #NodeJs
NodeJS实现客户端js加密
Jan 09 #NodeJs
策略(1) 内存(1) 缓存(3) 连接数(1) ipv6(1) UV(1) 弱口令(1) PV(1) 访问日志(2) 线程(1)
You might like
PHP出错界面
2006/10/09 PHP
php feof用来识别文件末尾字符的方法
2010/08/01 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
比较完整的微信开发php代码
2016/08/02 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
javascript 读取图片文件的大小
2009/06/25 Javascript
Javascript 学习笔记 错误处理
2009/07/30 Javascript
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
JS在textarea光标处插入文本的小例子
2013/03/22 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
2013/03/25 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
javaScript如何跳出多重循环break、continue
2016/09/01 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
JS实现定时任务每隔N秒请求后台setInterval定时和ajax请求问题
2017/10/15 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
Vue通过配置WebSocket并实现群聊功能
2019/12/31 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
python中zip和unzip数据的方法
2015/05/27 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
python3.6编写的单元测试示例
2019/08/17 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
详解python播放音频的三种方法
2019/09/23 Python
Python实现中值滤波去噪方式
2019/12/18 Python
美国著名的户外用品品牌：L.L.Bean
2018/01/05 全球购物
双语教学实施方案
2014/03/23 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
电气工程师岗位职责
2015/02/12 职场文书
Django操作cookie的实现
2021/05/26 Python
Django框架中模型的用法
2022/06/10 Python
Java异常体系非正常停止和分类
2022/06/14 Java/Android