04月27日
基于 Cloud Studio 快速搭建 Node.js 环境下 Express.js Socket.io 在线聊天应用

互联网时代,个人隐私安全问题正越来越受到重视。比如,在跟朋友聊天时,会经常因为担心聊天内容被无良公司从后台窥视而避免输入私密内容。面对这种情况,会有程序员建议自己搭一个聊天室以确保自己的隐私安全。通常情况下,采取这种措施,你需要:
1. 自己架设一台服务器(软件+硬件),或者,在云时代,建立一台云服务器。
2. 向域名提供商购买一个域名。
3. 配置防火墙等安全条例以防止黑客攻击/入侵。
4. 安装代码、数据库运行所需要的环境,比如 LNMP。
5. 编写你的个人聊天室。
以上内容的复杂繁琐程度以及经济消耗大概已经大大超过了普通人对于隐私保护的需求,当然,如果这些涉及到军事以及商业机密,那你当我没说。本篇文章将介绍一种简便的方法帮助你快速搭建一个属于自己的聊天室。

Cloud Studio + Node.js + Express.js + Socket.io

Cloud Studio

Cloud Studio 是腾讯云联合 CODING 共同推出的一款基于腾讯云小主机,集 Web IDE,Git,协同编辑,在线运行环境于一体的云端开发协作平台。图片
服务器线上环境置于腾讯云小主机内,具备原生的 Linux 线上终端,涵盖多种编程语言开发环境支持快速切换,直接生成访问链接无需购买域名。你需要做的只是在自己专属的 workspace 下进行开发工作。

Node.js

Node.js 是一个服务器端 JavaScript 运行环境,通过异步处理、事件驱动以及非阻塞 I/O 模型,使你的 Web 应用更加轻量、高效,实时快速被动更新页面信息。

Express.js

Express.js 是一个基于 Node.js 的灵活、极简的 Web 应用框架。

Socket.io

Socket.io 是一个即时、双向、基于事件驱动的 JavaScript 库。

本篇,将在 Express.js 框架下使用 Socket.io 完成并上线一个简单的在线聊天应用。
1. 进入你的 Cloud Studio 应用主界面。图片
2. 在右边栏点击展开运行环境,选择Node.js环境,点击使用并确定切换。图片
3. 创建一个新的文件夹,用来编辑我们的代码,这里将这个文件夹命名chat_room。 你可以在左边栏文树内空白处点击右键,新建文件夹;也可以直接在下方终端里输入 mkdir chat_room 来实现。图片
4. 进入chat_room目录下,可以直接将 GitHub 上的代码克隆下来git clone https://github.com/socketio/chat-example.git,也可以边看教程,边上手编程,一步步熟悉并学习 Node.js 的实现。这里,我们将一步一步编写我们的聊天室应用。
5. 接下来我们npm init初始化我们的聊天应用,
图片
并安装相应的模块。npm install --save express socket.io
图片
等待运行结束,展开chat_room目录你会看到npm已经帮我们生成好了 manifest 文件package.json并预装好了我们所要用到的库。
图片
6. 接下来,我们创建聊天室主界面index.html
图片

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>
</html>
  1. 创建index.js配置聊天室应用,在端口8080监听并回应HTTP GET请求返index.html给前端。
    图片
var app = require('express')();
var http = require('http').Server(app);

app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});

http.listen(8080, function(){
  console.log('listening on *:8080');
});

  1. 这样,一个空白的主界面就已经搭建好了,左边栏文件树如下图所示,
    图片
    在终端里,运行node index.js开启 Web 服务器。
    图片
    我们已经可以在右边栏访问链接里生成一个访问链接并查看效果,这个链接只有一小时的有效时间,Cloud Studio 钻石会员可以选择将链接转为永久有效,免去每次聊天需要给朋友发链接的麻烦。
    图片
    点击该链接,已经可以看到我们的聊天室框架。
    图片
  2. 接下来我们将用Socket.io来实现即时聊天功能,首先修改index.js,添加
var io = require('socket.io')(http);
io.on('connection', function(socket){
  console.log('a user connected');
  socket.on('disconnect', function(){
    console.log('user disconnected');
  });
});

图片
9. 在前端页面index.html里添加如下JavaScript

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
</script>

图片
10. 以上加入了我们在访问页面的时候由客户端发起的 Socket.io 连接的接通与断开
图片
11. 接下来,我们开始编写由客户端向服务端发送任意事件与数据,在index.html里修改如下代码

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  $(function () {
    var socket = io();
    $('form').submit(function(){
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
  });
</script>

图片
index.js里修改如下代码

  socket.on('chat message', function(msg){
    console.log('message: ' + msg);
  });

图片
12. 再次重新加载我们的服务器,就可以将前端的输入内容发送给后台了。
图片
图片
13. 最后一步,将服务器端收到的信息生成事件转发给所有前端。让所有接入这个聊天室的用户可以同时看到信息。修改index.js如下

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});

图片
添加前端下面代码到index.html

    socket.on('chat message', function(msg){
      $('#messages').append($('<li>').text(msg));
    });

图片
14. 重新加载服务器,一个简易的在线聊天室就上线了。
图片
图片

coding3901

1条评论

沙发

spyyy3 个月前回复