socket.io实现

最新推荐文章于 2025-08-23 02:53:08 发布

weixin_33980459

最新推荐文章于 2025-08-23 02:53:08 发布

阅读量78

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml 前端 ViewUI

原文链接：http://www.cnblogs.com/ermu-learn/p/5465224.html

本文介绍如何利用Node.js和Socket.IO实现一个简单的实时通讯应用。通过前后端代码示例，展示如何创建服务器并实现客户端与服务器之间的双向数据传输。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后台代码 index_server.js

var app = require('http').createServer(handler)//创建服务器app
   , io = require('socket.io').listen(app)//引用socket.io模块监听app
   , fs = require('fs')//引用文件处理模块

 app.listen(80);//指定app监听的端口，第二个参数127.0.0.1可省略
 
 function handler (req, res) {
   fs.readFile(__dirname + '/index.html',
   function (err, data) {
     if (err) {
       res.writeHead(500);
       return res.end('Error loading index.html');
     }
     res.writeHead(200);
     res.end(data);
   });
 }
 
 io.sockets.on('connection', function (socket) {//当客户端connection的时候，调用函数function (socket)
   socket.emit('news', { hello: 'link is OK' });//连接成功后发送news消息，传递一个josn对象
   socket.on('content', function (data) {//服务端发送my other event时，服务器接收后执行后面的函数
     socket.emit('content_callback', data);
   });
 });

前端代码 index.html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body style="margin:0 auto;padding:0px;">
<center>
    请输入你的名字：<input id="username" type="text" value="" name="username"/>
                    <input type="button" onclick="create_user()" value="提交"/><br />
                    <input type="text" value="" name="content"/>
                    <input id="content" onclick="send()" type="button"  value="发送"/><br />
                    <span id="link"></span><br/>
    <textarea name="" id="text" cols="120" rows="20"></textarea>
</center>
</body>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>

<script type="text/javascript">
var user="";
var socket = io.connect('http://localhost');//创建本地sock连接
socket.on('news',function (data) {//Socket接收news消息时执行回调函数
        var lable=document.getElementById("link");
        lable.innerHTML =data.hello;
    });
socket.on('content_callback',function (data) {//Socket接收news消息时执行回调函数
        var textarea=document.getElementById("text");
        text.value =data["user"]+"\n"+data["content"];
        
        var json = eval(data);
        console.log(data);
    });
function create_user(){
    var username=document.getElementById("username");
    if(username.value=="" || username.value==null){
        alert("输入为空！");
        return;
    }
    user=username.value;
    username.disabled=true;
    alert("你的用户名为："+user);

}
function send () {
    var chat={user:user,};
    var content=document.getElementById("content");
    if(content.value=="" || content.value==null){
        alert("请输入你要发送的内容");
        return;
    }
    chat['content'] = content.value;
    socket.emit('content',chat);
}
</script>
</html>