href nts res name call inpu cas element mit
本篇介绍使用node.js模块组件socket.io实现一个非常非常简易的聊天案例。
本系列文章不对 socket.io 历史背景做过多阐述,只会通过一个个的案例带领大家进入socket.io的殿堂,增进小伙伴在socket.io实际开发中的基本使用。
socket.io 官网地址:https://www.socket.io
本篇案例使用到的node.js模块组件:
express # 做为 socket 通信的依赖服务基础
socket.io # socket 通信基础模块
源码下载地址:http://pan.baidu.com/s/1mhPJHyg
- var http=require("http");
- var express=require("express");//引入express
- var socketIo=require("socket.io");//引入socket.io
- var app=new express();
- var server=http.createServer(app);
- var io=new socketIo(server);//将socket.io注入express模块
- //客户端 1 的访问地址
- app.get("/client1",function (req,res,next) {
- res.sendFile(__dirname+"/views/client1.html");
- });
- //客户端 2 的访问地址
- app.get("/client2",function (req,res,next) {
- res.sendFile(__dirname+"/views/client2.html");
- });
- server.listen(8080);//express 监听 8080 端口,因为本机80端口已被暂用
- //每个客户端socket连接时都会触发 connection 事件
- io.on("connection",function (clientSocket) {
- // socket.io 使用 emit(eventname,data) 发送消息,使用on(eventname,callback)监听消息
- //监听客户端发送的 sendMsg 事件
- clientSocket.on("sendMsg",function (data) {
- // data 为客户端发送的消息,可以是 字符串,json对象或buffer
- // 使用 emit 发送消息,broadcast 表示 除自己以外的所有已连接的socket客户端。
- clientSocket.broadcast.emit("receiveMsg",data);
- })
- });
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>客户端1</title>
- </head>
- <body>
- <label>聊天内容:</label><br/>
- <textarea id="content" style="height: 200px; width:300px;"></textarea>
- <br/>
- <input id="sendMsg" type="text"/>
- <button id="btn_send">发送</button>
- <!-- 首先引入 socket.io 客户端脚本-->
- <script src="/socket.io/socket.io.js"></script>
- <script type="text/javascript">
- var socket = io.connect();//连接服务端,因为本机使用localhost 所以connect(url)中url可以不填或写 http://localhost
- // 监听 receiveMsg 事件,用来接收其他客户端推送的消息
- socket.on("receiveMsg",function (data) {
- content.value+=data.client+":"+data.msg+"\r\n";
- });
- var content=document.getElementById("content");
- var sendMsg=document.getElementById("sendMsg");
- var btn_send=document.getElementById("btn_send");
- btn_send.addEventListener("click",function () {
- var data={client:"客户端1",msg:sendMsg.value};
- //给服务端发送 sendMsg事件名的消息
- socket.emit("sendMsg",data);
- content.value+=data.client+":"+data.msg+"\r\n";
- sendMsg.value="";
- });
- </script>
- </body>
- </html>
界面效果如下:
socket.io 入门篇(一)
href nts res name call inpu cas element mit
原文:http://www.cnblogs.com/limitcode/p/7845168.html
来源: http://www.bubuko.com/infodetail-2397307.html