使用socket.io，其前后端句法是一致的，即通过socket.emit()来激发一个事件，通过socket.on()来侦听和处理对应事件。这两个事件通过传递的参数进行通信。具体工作模式可以看下面这个示例。
比如我们在index.html里面有如下JavaScript代码（假设你已经在页面放了一个ID为sendBtn的按钮）：
<script type="text/javascript"> var socket=io.connect(),//与服务器进行连接 button=document.getElementById('sendBtn'); button.onclick=function(){ socket.emit('foo', 'hello');//发送一个名为foo的事件，并且传递一个字符串数据‘hello' } </script>
上述代码首先建立与服务器的连接，然后得到一个socket实例。之后如果页面上面一个ID为sendBtn的按钮被点击的话，我们就通过这个socket实例发起一个名为foo的事件，同时传递一个hello字符串信息到服务器。
与此同时，我们需要在服务器端写相应的代码来处理这个foo事件并接收传递来的数据。
为此，我们在server.js中可以这样写：
//服务器及页面响应部分 var express = require('express'), app = express(), server = require('http').createServer(app), io = require('socket.io').listen(server); //引入socket.io模块并绑定到服务器 app.use('https://www.jb51.net/', express.static(__dirname + '/www')); server.listen(80); //socket部分 io.on('connection', function(socket) { //接收并处理客户端发送的foo事件 socket.on('foo', function(data) { //将消息输出到控制台 console.log(data); }) });
现在Ctrl+C关闭之前启动的服务器，再次输入node server启动服务器运行新代码查看效果，一切正常的话你会在点击了页面的按扭后，在命令行窗口里看到输出的'hello'字符串。
一如之前所说，socket.io在前后端的句法是一致的，所以相反地，从服务器发送事件到客户端，在客户端接收并处理消息也是显而易见的事件了。这里只是简单介绍，具体下面会通过发送聊天消息进一步介绍。
基本页面
有了上面一些基础的了解，下面可以进入聊天程序功能的开发了。
首先我们构建主页面。因为是比较大众化的应用了，界面不用多想，脑海中已经有大致的雏形，它有一个呈现消息的主窗体，还有一个输入消息的文本框，同时需要一个发送消息的按钮，这三个是必备的。
另外就是，这里还准备实现以下四个功能，所以界面上还有设置字体颜色，发送表情，发送图片和清除记录四个按钮。
最后的页面也就是先前截图展示的那们，而代码如下：
www/index.html
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta content="Wayou"> <meta content="hichat | a simple chat application built with node.js and websocket"> <meta content="width=device-width, initial-scale=1"> <title>hichat</title> <link href="https://www.jb51.net/styles/main.css"> <link href="https://www.jb51.net/favicon.ico" type="image/x-icon"> <link href="https://www.jb51.net/favicon.ico" type="image/x-icon"> </head> <body> <div> <div> <h1>HiChat :)</h1> <span></span> </div> <div> </div> <div > <div> <input type="color" placeHolder='#000' title="font color" /> <input type="button" value="emoji" title="emoji" /> <label for="sendImage"> <input type="button" value="image" /> <input type="file" value="image"/> </label> <input type="button" value="clear" title="clear screen" /> </div> <textarea placeHolder="enter to send"></textarea> <input type="button" value="SEND"> <div> </div> </div> </div> <div> <p>connecting to server...</p> <div> <input type="text" placeHolder="nickname" /> <input type="button" value="OK" /> </div> </div> <script src="https://www.jb51.net/socket.io/socket.io.js"></script> <script src="https://www.jb51.net/scripts/hichat.js"></script> </body> </html>
样式文件 www/styles/main.css
html, body { margin: 0; background-color: #efefef; font-family: sans-serif; } .wrapper { width: 500px; height: 640px; padding: 5px; margin: 0 auto; background-color: #ddd; } #loginWrapper { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(5, 5, 5, .6); text-align: center; color: #fff; display: block; padding-top: 200px; } #nickWrapper { display: none; } .banner { height: 80px; width: 100%; } .banner p { float: left; display: inline-block; } .controls { height: 100px; margin: 5px 0px; position: relative; } #historyMsg { height: 400px; background-color: #fff; overflow: auto; padding: 2px; } #historyMsg img { max-width: 99%; } .timespan { color: #ddd; } .items { height: 30px; } #colorStyle { width: 50px; border: none; padding: 0; } /*custom the file input*/ .imageLable { position: relative; } #sendImage { position: absolute; width: 52px; left: 0; opacity: 0; overflow: hidden; } /*end custom file input*/ #messageInput { width: 440px; max-width: 440px; height: 90px; max-height: 90px; } #sendBtn { width: 50px; height: 96px; float: right; } #emojiWrapper { display: none; width: 500px; bottom: 105px; position: absolute; background-color: #aaa; box-shadow: 0 0 10px #555; } #emojiWrapper img { margin: 2px; padding: 2px; width: 25px; height: 25px; } #emojiWrapper img:hover { background-color: blue; } .emoji{ display: inline; } footer { text-align: center; }