用node.js建自己的个人聊天网站（四）

alltolove · 发表于 2017-6-4 10:21:43

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

我先说说什么叫公网跟内网：
公网又叫外网，就是指互联网可以访问所有网站。
内网又叫私网，局域网就只能访问你所在路由器（也可以是无线路由器）下一级的网站。内网的ip地址规定以192.168开头。
其实许多网络供应商也是由自己的路由器给你分配出去的网线，他只是通过某种手段让你能访问到公网而已，了解了这些对我们以后部署网站会有所帮助。
今天我们讲websocket客户端的搭建。
我们的客户端就是我们做的网页，是用html5自带的websocket功能完成的，websocket与http都是基于tcp/ip上层的一个网络协议，不过websocket协议支持实时传送数据，是今年来非常流行的，据说也能做网游。
我们的网页分为两部分，一个是发送端，一个是接收端，接收端是用iframe标签嵌入进发送端的一个页面，首先我们先做接收端，以下为代码：

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv=refresh content="1"> 
        <title>Document</title>
        <style>
                body{
                        overflow: hidden;
                }
                
        </style>
</head>
<body id="output">        
        <script>
                        var ws;
                        function setup(){
                                output=document.getElementById('output');
                                ws=new WebSocket('ws://127.0.0.1:3000');
                                ws.onmessage=function(e){
                                        output.innerHTML=e.data;
                                }
                        }
                        setup();
                </script>        
</body>
</html>

把这个页面建好后，点击右键复制，然后打开webstorm打开以前我们建的个人网站项目（不是websocket服务器），选public目录点击右键粘贴进去，如下图：

然后我们在index.ejs文件里写入发送端的代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Document</title>
  <style>
    body{
      background-color: rgba(255,97,0,0.5);
    }
    #output{
      border: 1px solid lightblue;
      margin-top: 20px;
      padding: 10px;
    }
    #input{
      border: 1px solid lightblue;
    }
  </style>
</head>
<body class="container-fluid">
<h1 class="page-header text-center">chat page</h1>
<div class="form-group form-inline">
  <label for="input">plese fill in your name:</label>
  <input type="text" id="inputname" class="form-control input-lg" placeholder="name" onblur="setName()">
</div>
<div>
  <div class="form-group">
    <label for="input">plese text:</label>
    <input type="text" id="input" class="form-control input-lg" placeholder="bla bla bla">
  </div>
  <button class="btn btn-info" id="send" onclick="sendInput()">send</button>
</div>
<iframe src="ballMove2.html" width="100%" height="250" frameborder="0" id="output" class="thumbnail" draggable="true"></iframe>
<script>
    var ws=new WebSocket('ws://127.0.0.1:3000');
    var name='';
    function setName(){
        var obj=document.getElementById('inputname');
        name=obj.value+': ';
    }
    function sendInput(){
        input=document.getElementById('input');
        ws.send(name+input.value);
        input.value='';
    }
</script>
</body>
</html>

然后我们进入www文件把端口号改成80端口，因为2个服务器不能用一个端口号，如下图：

然后点右上小三角启动服务器，再进入dos命令行启动我们之前做好的websocket服务器（进入你所建的目录用 node 文件名这种方式启动）如图：

然后在网页上键入http://127.0.0.1:80进入主页，就可以进行聊天了。明天我们修复一个小bug（让聊天内容显示的更合理），还有用bootstrap给网页加样式

alltolove · 发表于 2017-6-4 10:31:59

别忘了把

34.<iframe src="ballMove2.html" width="100%" height="250" frameborder="0" id="output" class="thumbnail" draggable="true"></iframe>

里的文件名改成你自己的文件名

账号		自动登录	找回密码
密码			立即注册

[技术交流] 用node.js建自己的个人聊天网站（四）

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐: