1. 介绍

    这篇文章介绍一下如何实现一个简易的聊天室。
    5、实现简易聊天室 - 图1

    1. 客户端

    首先是界面。
    新建一个index.html文件，内容如下：

    1. <html>
    2.   <head>
    3.     <meta charset="UTF-8" content="text/html" http-equiv="Content-Type">
    4.     <title>websocket chat</title>
    5.     <script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.js"></script>
    6.     <script src="./main.js"></script>
    7.   </head>
    8.   <body>
    9.     <h1>websocket chat</h1>
    10.     <div>
    11.       <input id="name" size="15" type="text" value="NAME">
    12.       <input id="message" size="80" type="text" value="hello hello">
    13.       <input id="btn_post" type="button" value="post">
    14.     </div>
    15.     <ul id="chat"></ul>
    16.   </body>
    17. </html>

    新建main.js文件，内容如下：

    1. var ws = new WebSocket("ws://localhost:8080");
    3. ws.onmessage = function(e){
    4.   print(e.data);
    5. };
    7. ws.onopen = function(e){
    8.   log("websocket open");
    9.   console.log(e);
    10. };
    12. ws.onclose = function(e){
    13.   log("websocket close");
    14.   console.log(e);
    15. };
    17. $(function(){
    18.   $("#btn_post").click(post);
    19.   $("#message").keydown(function(e){
    20.     if(e.keyCode == 13) post();
    21.   });
    22. });
    24. var post = function(){
    25.   var name = $("#name").val();
    26.   var mes = $("#message").val();
    27.   ws.send(name+" : "+mes);
    28.   $("input#message").val("");
    29. };
    31. var log = function(msg){
    32.   console.log(msg);
    33.   $("#chat").prepend($("<li>").text("[log] "+msg));
    34. };
    36. var print = function(msg){
    37.   $("#chat").prepend($("<li>").text(msg));
    38. };

    post函数中有一句ws.send(name+” : “+mes);发送到服务器端，这个是发送聊天语句的。

    1. 服务器端

    现在添加服务器端代码。
    新建echo_server.rb文件，内容如下：

    1. #!/usr/bin/env ruby
    2. require 'eventmachine'
    3. require 'websocket-eventmachine-server'
    5. PORT = (ARGV.shift || 8080).to_i
    7. EM::run do
    8.   @channel = EM::Channel.new
    10.   puts "start websocket server - port:#{PORT}"
    12.   WebSocket::EventMachine::Server.start(:host => "0.0.0.0", :port => PORT) do |ws|
    13.     ws.onopen do
    14.       sid = @channel.subscribe do |mes|
    15.         ws.send mes
    16.       end
    17.       puts "<#{sid}> connect"
    19.       @channel.push "hello new client <#{sid}>"
    21.       ws.onmessage do |msg|
    22.         puts "<#{sid}> #{msg}"
    23.         @channel.push "<#{sid}> #{msg}"
    24.       end
    26.       ws.onclose do
    27.         puts "<#{sid}> disconnected"
    28.         @channel.unsubscribe sid
    29.         @channel.push "<#{sid}> disconnected"
    30.       end
    31.     end
    32.   end
    34. end

    浏览器和服务器端一直会维持链接，ws.send mes表示发送信息给浏览器，只要浏览器与服务器端维持着链接，就会收到信息，相当于广播了。
    运行服务器。

    $ ruby echo_server.rb

    接着打开两个浏览器，都分别运行index.html文件，就可以看到效果了。
    本篇完结。