socket.io快速入门

最新推荐文章于 2024-04-11 00:42:16 发布

weixin_33753003

最新推荐文章于 2024-04-11 00:42:16 发布

阅读量165

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhou195/p/8994813.html

本文介绍了一个使用Socket.IO实现的简单实时通信案例。客户端通过特定URL加载socket.io.js库，并连接到本地服务器。服务端使用Node.js搭建，监听客户端连接并进行消息收发。具体包括自定义事件设置及消息传递。

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

客户端：index.html

<!-- 引入远程socket.io.js -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.1/socket.io.js"></script> -->

<!-- 官方例子写法 -->
<!-- <script src="/socket.io/socket.io.js"></script> -->
<!-- 需要改成以下写法 -->
<script src="http://localhost:8888/socket.io/socket.io.js"></script>

<script>

  //创建socket
  var socket = io('http://localhost:8888');

  /* 
    创建自定义事件 'news'
    作用：接受服务端 socket.emit('news', 数据); 发出的数据
  */
  socket.on('news', function (data) {

    //输出服务端响应了数据
    console.log(data);

    //向服务端的自定义事件 'my other event' 发出数据
    socket.emit('my other event', { my: 'data' });
  });
</script>

服务端：server.js [node.js]

var app = require('http').createServer(handler)
var io = require('socket.io')(app); 
var fs = require('fs');

app.listen(8888);


//URL请求处理
/*
服务器web请求处理器
作用: 当客户端请localhost:8888时，打开默认页面 /index.html
*/
function handler (req, res) {
  //打开默认页面
  fs.readFile(__dirname + '/index.html',
  
  //响应处理方法
  function (err, data) {

    //情况1：如果 err 不为空，那么表示没有找到 /index.html
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    //情况2：找到了 /index.html
    res.writeHead(200);
    res.end(data);
  });
}


// socket请求处理
io.on('connection', function (socket) {

  // 向客户端的自定义事件'news'发送数据
  socket.emit('news', { hello: 'world' });
  
  // 创建自定义事件 my other event
  socket.on('my other event', function (data) {
    console.log(data);
  });
});