微客导航 » 文章资讯 » 使用socket.io实现简单聊天室案例

使用socket.io实现简单聊天室案例

2023-09-18 11:42:05 251

本文实例为大家分享了socket.io实现简单聊天室的具体代码，供大家参考，具体内容如下

1、客户端【index.html】代码：


socket简例






{{item.name}}说：{{item.content}}




发送

var_vm=newVue({ data:{ name:'用户', msg:'', msgs:[], }, methods:{ m_send:function(){ //向客户端发送消息 socket_client.emit('say_client',{ name:this.name, content:this.msg }); this.msg=''; } } }).$mount('#app'); //socket服务器 varsocket_client=io.connect('http://127.0.0.1:3000'); /** *监听服务端发来的消息 * *1、“say_server”是客户端发出信息时的key值 *2、“res”是客户端传来的value值 */ socket_client.on('say_server',function(res){ console.log('服务端发来的消息为：',res); _vm.msgs.push(res); });

2、服务端【app.js】代码：

consthttp=require('http');
constserver=http.createServer();

//web服务器
constexpress=require('express');
constapp=express();

app.use(express.static(__dirname+'/public'));

app.listen(8888,function(){
console.log('web服务器成功启动了，IP：127.0.0.1，端口号：8888');
});


//socket服务器

constsocketio=require('socket.io');
constsocket_server=socketio(server);

//建立和客户端的socket连接
socket_server.on('connection',function(client){

//console.log(client);//查看连接进来的客户端对象内容
//console.log(Object.keys(client));//查看连接进来的客户端对象的关键key值

/**
*监听客户端发来的消息
*
*1、“say_client”是客户端发出信息时的key值
*2、“res”是客户端传来的value值
*/
client.on('say_client',function(res){
console.log('客户端发来的消息为：',res);

//向客户端发送消息
socket_server.emit('say_server',res);
});
});


server.listen(3000,function(){
console.log('socket服务器成功启动了，IP：127.0.0.1，端口号：3000');
});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

使用socket.io实现简单聊天室案例

socket简例

热门推荐

随机推荐