Socket.io教程: Express结合Socket.io实现通信: 聊天室及智能客服的简单演示

基于express的socket.io通信代码展示

服务端

var express = require('express');
var app = express();
var server = require('http').Server(app);
var io = require('socket.io')(server);

app.set('view engine','ejs');
app.use(express.static('public'));

app.get('/',function(req,res){
    //res.send('首页');
    res.render('index');
})

// 监听端口
server.listen(3000,'127.0.0.1');

// 写socket的代码
io.on('connection', function (socket) {
    // console.log('建立链接')

    // 群聊的实现
    socket.on('message1',function(data){
        // console.log(data);

        // 群聊的实现 1对多,广播
        io.emit('servermessage',data);   // 服务器给客户端发送数据
    });
    
    // 智能客服的实现
    socket.on('message2',function(data){
        // console.log(data);

        // 智能客服的实现 1对1,客户端之间互不影响
        var msg = '';
        if(data == 302) {
            msg = '您当前的话费有100元'
        }else if(data == 301){
            msg = '您当前的流量有2000M'
        } else {
            msg = '请输入正确的信息'
        }
        socket.emit('servermessage', msg);
    });
});

客户端

<script src="/jquery-1.11.3.min.js"></script>
<script src="http://127.0.0.1:3000/socket.io/socket.io.js"></script>

<input type="text" id="msg"/>
<br/>
<br/>
<button id="send1">群聊发送</button>
<button id="send2">客服发送</button>

<script>
    $(function(){
        var socket = io.connect('http://127.0.0.1:3000/');

        // 聊天室: 群聊功能
        $('#send1').click(function(){
            var msg = $('#msg').val();
            socket.emit('message1',msg);  // 客户端给服务器发送数据
        });

        // 智能客服
        $('#send2').click(function(){
            var msg = $('#msg').val();
            socket.emit('message2',msg);  // 客户端给服务器发送数据
        });

        // 接受服务器返回的数据
        socket.on('servermessage',function(data){
            console.log(data)
        });
    })
</script>

相关说明

  • io.emit 广播:所有和服务端建立的客户端都能收到信息
  • socket.emit 单播:单个socket互不影响,谁给我发的信息我回返回给谁
  • 可以在打开多个客户端页面做对比测试
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Wang's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值