当前位置: 首页 > 前端笔记 > 其他 > NodeJS,socket.io搭建WEBSOCKET聊天室
2014年29七月

NodeJS,socket.io搭建WEBSOCKET聊天室

因为有个特殊的需求,用HTML5通过websocket去控制继电器的开关。有点物联网的雏形,哈哈!原来只是一直听说过websocket这个玩意,也没有时间去详细了解,今天终于看到了。

第一步,安装nodejs。这个在windows下狠简单一路next就可以了,其他操作系统自行百度。我是windows的忠实FANS。官方网站去下载:http://nodejs.org/。测试有没有安装成功,打开cmd,输入“node -v”,显示版本号就对了。

第二步,安装express。在任意地方建立项目目录,在里面创建package.json文件,插入以下内容:

{
  "name": "socket-chat-example",
  "version": "0.0.1",
  "description": "my first socket.io app",
  "dependencies": {}
}

打开CMD窗口,转到创建的项目目录下。(如:D:\socket\,对应的命令就是1.D:回车;2.cd socket)。然后输入命令:npm install --save express。然后就看到一堆网址在走。

测试express是否安装成功:在根目录下创建index.js文件,在里面输入:

var app = require("express")();
var http = require("http").Server(app);

app.get("/", function(req, res){
  res.send("<h1>Hello world</h1>");
});

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

在cmd窗口中输入:node index.js,如果出现以下文字:listening on *:3000,在浏览器中访问:http://localhost:3000,如果能出现“Hello world”,恭喜你安装成功了。ctrl+c终止操作。

第三步:安装socket.io。输入命令:npm install --save socket.io

将index.js中的内容修改成以下内容:

var app = require("express")();
var http = require("http").Server(app);
var io = require("socket.io")(http);

app.get("/", function(req, res){
  res.sendfile("index.html");
});

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

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

创建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>
    <script src="/socket.io/socket.io.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
      var socket = io();
      $("form").submit(function(){
        socket.emit("chat message", $("#m").val());
        $("#m").val("");
        return false;
      });
      socket.on("chat message", function(msg){
        $("#messages").append($("<li>").text(msg));
      });
    </script>
  </body>
</html>

在cmd窗口中输入:node index.js,然后可以在多个浏览器中打开“http://localhost:3000”,在多个电脑中打开“http://内网IP:3000”访问。

基本上就可以无障碍聊天了。相比以前的轮询,长链接之类的方法,速度快,无延时,还有就是浏览器不会一直在转圈圈!打完收工!

以上步骤如果出现问题,请参照官方网站:http://socket.io/get-started/chat/

据说Socket.IO实现了ws协议的库,不过它支持的更多,不仅实现了ws协议,也支持长轮询等方式,兼容flash,IE6等不支持ws协议的浏览器。没有验证过,默默飘过!

由于编辑器转码,可能会导致问题,这里直接下载附件:chat.zip

文章信息

  • 发布日期:2014年07月29日 22:52:50
  • 固定地址:http://www.estorm.cn/notes/other/2014-07-29/nodejs-socket-io-websocket.html