利用socket.io 实现客户端（浏览器）和服务器（node搭建的服务器端）进行交互

之前阅读了各种文档其中有个聊天文档，按照上述一步一步实现，发现index.js 内引入socket.io.js 然并不起作用，搜索了很多文档，一一实现也没解决，改成var ws = websocket('ws://localhost')浏览器才会打印出socket,但是却报另一种错误。

后才查阅发现socket.io 和websocket 完全就是两个东西，具体可参考文档：https://socket.io/docs/#What-Socket-IO-is-not%EF%BC%89%EF%BC%9A

最后在头部引入

<script src="/socket.io/socket.io.js"></script>
然后重新关闭（重点）命令行，打开项目文件夹重新启动命令行npmmoon server.js 解决了。
正确的代码应该以下：（不然容易牵手不成功）
首先 下载npm install express  npm install socket.io  如果想要热更新再加：npm -g express nodemoon(后面执行命令改为nodemoon 启动服务即可)
 
然后再serve.js 内添加下代码：
复制代码
var express = require('express'),
app = express()
    server = require('http').createServer(app)
    io = require('socket.io').listen(server)
    app.use('/',express.static(__dirname+'/www'))
//监听80端口
server.listen(8078);    
console.log('server started');

//socket部分
io.on('connection', function(socket) {
    //接收并处理客户端发送的foo事件
    socket.on('foo', function(data) {
        //将消息输出到控制台
        console.log(data);
    })
});
复制代码

在同目录下创建www文件=》内添加index.html(客户端)

复制代码
index.html

<html>
    <title>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="author" content="Wayou">
        <meta name="description" content="hichat | a simple chat application built with node.js and websocket">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>hichat</title>
        <!-- <script src="/socket.io/socket.io.js"></script> -->
  <!-- <script src="https://cdn.bootcss.com/socket.io/2.1.0/socket.io.js"></script> -->
        <!-- <script src="http://localhost:8078/socket.io/socket.io.js"></script> -->
    </title>
    <body>
        <div>
            test
            <button id="sendBtn">点击发送1</button>
        </div>
        <script src="/socket.io/socket.io.js"></script>
        <script type="text/javascript">
        var socket = io();
        button=document.getElementById('sendBtn');
        button.onclick=function(){
        console.log('io',io)
        socket.emit('foo', 'hello');//发送一个名为foo的事件，并且传递一个字符串数据‘hello’
    }
     
       /**REMOVE ME IF YOU CANT ACCESS GOOGLE SERVICE**/
        //  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        //  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        //  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        //  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
        //  ga('create', 'UA-46794744-7', 'hichat.herokuapp.com');
        //  ga('send', 'pageview');
       /**REMOVE END**/
   </script>
    </body>
</html>
复制代码

启动服务器：nodemoon serve.js

打开浏览器点击按钮 控制台就会获取客户端发送的数据了，剩下的扩展就根据api进行开发即可

socket.io 事件速查表：

复制代码
io.on('connect', onConnect);

function onConnect(socket){

  // 发送给当前客户端
  socket.emit('hello', 'can you hear me?', 1, 2, 'abc');

  // 发送给所有客户端，除了发送者
  socket.broadcast.emit('broadcast', 'hello friends!');

  // 发送给同在 'game' 房间的所有客户端，除了发送者
  socket.to('game').emit('nice game', "let's play a game");

  // 发送给同在 'game1' 或 'game2' 房间的所有客户端，除了发送者
  socket.to('game1').to('game2').emit('nice game', "let's play a game (too)");

  // 发送给同在 'game' 房间的所有客户端，包括发送者
  io.in('game').emit('big-announcement', 'the game will start soon');

  // 发送给同在 'myNamespace' 命名空间下的所有客户端，包括发送者
  io.of('myNamespace').emit('bigger-announcement', 'the tournament will start soon');

  // 发送给指定 socketid 的客户端（私密消息）
  socket.to(<socketid>).emit('hey', 'I just met you');

  // 包含回执的消息
  socket.emit('question', 'do you think so?', function (answer) {});

  // 不压缩，直接发送
  socket.compress(false).emit('uncompressed', "that's rough");

  // 如果客户端还不能接收消息，那么消息可能丢失
  socket.volatile.emit('maybe', 'do you really need it?');

  // 发送给当前 node 实例下的所有客户端（在使用多个 node 实例的情况下）
  io.local.emit('hi', 'my lovely babies');

};
复制代码

 

复制代码
服务端
io.on(‘connection’,function(socket));//监听客户端连接,回调函数会传递本次连接的socket

io.sockets.emit(‘String’,data);//给所有客户端广播消息

io.sockets.socket(socketid).emit(‘String’, data);//给指定的客户端发送消息

socket.on(‘String’,function(data));//监听客户端发送的信息

socket.emit(‘String’, data);//给该socket的客户端发送消息

广播消息

//给除了自己以外的客户端广播消息
socket.broadcast.emit("msg",{data:"hello,everyone"}); 
//给所有客户端广播消息
io.sockets.emit("msg",{data:"hello,all"});
分组

socket.on('group1', function (data) {
        socket.join('group1');
});
socket.on('group2',function(data){
        socket.join('group2');
 });
客户端发送

socket.emit(‘group1’)，就可以加入group1分组；
socket.emit(‘group2’)，就可以加入group2分组；

一个客户端可以存在多个分组（订阅模式）

踢出分组

socket.leave(data.room);

对分组中的用户发送信息

//不包括自己
socket.broadcast.to('group1').emit('event_name', data);
//包括自己
io.sockets.in('group1').emit('event_name', data);
broadcast方法允许当前socket client不在该分组内

获取连接的客户端socket

io.sockets.clients().forEach(function (socket) {
    //.....
})
获取分组信息

//获取所有房间（分组）信息
io.sockets.manager.rooms
//来获取此socketid进入的房间信息
io.sockets.manager.roomClients[socket.id]
//获取particular room中的客户端，返回所有在此房间的socket实例
io.sockets.clients('particular room')
另一种分组方式

io.of('/some').on('connection', function (socket) {
    socket.on('test', function (data) {
        socket.broadcast.emit('event_name',{});
    });
});
客户端

var socket = io.connect('ws://103.31.201.154:5555/some')
socket.on('even_name',function(data){
   console.log(data);
})
客户端都链接到ws://103.31.201.154:5555 但是服务端可以通过io.of(‘/some’)将其过滤出来。

另外，Socket.IO提供了4个配置的API：io.configure, io.set, io.enable, io.disable。其中io.set对单项进行设置，io.enable和io.disable用于单项设置布尔型的配置。io.configure可以让你对不同的生产环境（如devlopment，test等等）配置不同的参数。

客户端
建立一个socket连接

var socket = io(“ws://103.31.201.154:5555”);

监听服务消息

socket.on('msg',function(data){
    socket.emit('msg', {rp:"fine,thank you"}); //向服务器发送消息
    console.log(data);
});
socket.on(“String”,function(data)) 监听服务端发送的消息 Sting参数与服务端emit第一个参数相同

监听socket断开与重连。

socket.on('disconnect', function() {
    console.log("与服务其断开");
});


socket.on('reconnect', function() {
    console.log("重新连接到服务器");
});
客户端socket.on()监听的事件：
connect：连接成功
connecting：正在连接
disconnect：断开连接
connect_failed：连接失败
error：错误发生，并且无法被其他事件类型所处理
message：同服务器端message事件
anything：同服务器端anything事件
reconnect_failed：重连失败
reconnect：成功重连
reconnecting：正在重连
当第一次连接时，事件触发顺序为：connecting->connect；当失去连接时，事件触发顺序为：disconnect->reconnecting（可能进行多次）->connecting->reconnect->connect。
复制代码

 

 
posted @   少哨兵  阅读(2717)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示