官方文档:https://socket.io/zh-CN/docs/v4/client-installation/

体验地址:聊天室

1.创建文件目录

2.执行命令

1
2
//创建package.json文件
npm init

3.引入express和socket.io

1
npm install socket.io express

4.创建app.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http, {
allowEIO3: true, //开启兼容模式 Socket.IO v2客户端的兼容性
cors: {
origin: [ //跨域处理,指定哪些可以请求socket
"http://localhost:8080",
"http://23night.cn:3000"
],
methods: ["GET", "POST"],
credentials: true
}
});

io.on('connection', function (socket) {
//---
});

http.listen(3000, function () {
console.log('开启,并监听3000端口');
});

5.创建客户端,创建vue2项目

1
2
3
4
//创建vue项目
vue create xxx
//进入vue项目然后安装socket.io-client 插件
npm install socket.io-client

6.客户端引入socket.io

main.js里面引入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import Vue from 'vue'
import App from './App.vue'
//引入socket.io
import {io} from 'socket.io-client'

Vue.config.productionTip = false

//关联服务器地址
const socket = io('http://localhost:3000',{
autoConnect:false, //autoConnect (布尔型) 如果设置为fasle,你不得不手动调用socket.open()函数 true 则自动链接
});
//挂载到vue身上
Vue.prototype.$socket = socket

new Vue({
render: h => h(App),
}).$mount('#app')

客户端 在app.vue文件中可以使用了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<template>
<div id="app">
<button @click="socketopen">收到链接socket</button>
{{ name }}
<div style="border: 3px solid;background: skyblue;margin: 5px 0;">
<h3>广播信息</h3>
<div>
<ul>
<li v-for="(item,index) in onlinedata" :key="index">{{ item.msg }}</li>
</ul>
</div>
</div>
<div style="border: 3px solid;background: pink;margin: 5px 0;">
<h3>用户列表</h3>
<ul>
<li v-for="(item,index) in userlist" :key="index">
<template v-if="item.name == name">
{{ item.name }}
</template>
<template v-else>
<a href="javascript:;" @click="checkuser(item)">{{ item.name }}</a>
</template>
</li>
</ul>
</div>
<div style="border: 3px solid;background: #fff;margin: 5px 0;">
<div v-if="checkuserobj">
<h3>聊天人:{{ checkuserobj.midname }}</h3>

<div>
<input type="text" v-model="textinput">
<button @click="sendmsg">发送</button>
</div>
</div>
</div>
<div style="border: 3px solid red;margin: 5px 0;">
<div>
<ul>
<li v-for="(item,index) in getprivateChatlist" :key="index">
<p>发送人:{{ item.username }} --- 接收人:{{ item.midname }}</p>
<p>消息内容:{{ item.msg }}</p>
</li>
</ul>
</div>
</div>
<div style="border: 3px solid green;margin: 5px 0;">
<h3>群聊</h3>
<div>
<input type="text" v-model="textinput2">
<button @click="sendmsg2">发送</button>
</div>
</div>
<div style="border: 3px solid gray;margin: 5px 0;">
<h3>房间</h3>
<div>
<input type="text" v-model="roomname">
<button @click="joinroom">加入房间</button>
</div>
<div>
<h4>房间聊天公告</h4>
<div>
<ul>
<li v-for="(item,index) in roommsg">{{ item.msg }}</li>
</ul>
</div>
</div>
<div>
<h4>房间聊天室</h4>
<div>
<ul>
<li v-for="(item,index) in roomseklist">{{ item.msg }}</li>
</ul>
</div>
</div>
<div>
<input type="text" v-model="roomtxt">
<button @click="sendroomtxt">发送</button>
</div>
<div>
<button @click="leaveroom">离开房间</button>
</div>
</div>


</div>
</template>

<script>

export default {
name: 'App',
data(){
return{
name:'',
onlinedata:[],
userlist:[],
checkuserobj:null,
textinput:'',
getprivateChatlist:[],
// 群聊
textinput2:'',
//房间
roomname:'',
roommsg:[],//房间内的公告
roomseklist:[],//聊天内容
roomtxt:'',
}
},
created(){
//刷新界面,容易出现打印多遍情况 先取消再监听,再接收方信息
this.$socket.off('online');
this.$socket.off('getprivateChat');
this.$socket.off('getallChat');
this.$socket.off('getroommsg');
this.$socket.off('getroomsenmsg');

var that = this;
this.name = 'zf'+Date.now()
//创建用户信息列表
var obj = {
createtime: Date.now(), //当前时间戳
name: this.name,
msg:'',
}
//发送消息,登录信息
this.$socket.emit('login',obj,function(result){
if(result.code == 1){
that.$socket.on('online',function(data){
console.log('online',data)
that.onlinedata.push(data)
that.userlist = data.data;
})
}else{
console.log(result.msg)
}
})

//接收私聊消息
this.$socket.on('getprivateChat',function(data){
console.log('getprivateChat',data)
that.getprivateChatlist.push(data)
})

//接收群聊消息
this.$socket.on('getallChat',function(data){
console.log('接收群聊消息',data)
})

//接收房间公告
this.$socket.on('getroommsg',function(data){
that.roommsg.push(data)
})

//接收房间群聊
this.$socket.on('getroomsenmsg',function(data){
that.roomseklist.push(data)
})

},
methods:{
socketopen(){
this.$socket.open();
},
checkuser(item){ //私聊发送消息
console.log(item)
let obj = {
type:'privateChat',
username:this.name,
midname:item.name,
mid:item.id,
msg:this.textinput,
}
this.checkuserobj = obj

},
sendmsg(){
this.checkuserobj.msg = this.textinput;
this.$socket.emit('privateChat',this.checkuserobj)
},
sendmsg2(){ //发送群聊信息
this.$socket.emit('allChat',this.textinput2)
},
joinroom(){ //加入房间
this.$socket.emit('joinroom',this.roomname)
},
sendroomtxt(){
this.$socket.emit('roomsenmsg',{room:this.roomname,msg:this.roomtxt})
},
leaveroom(){
this.$socket.emit('leaveroom',this.roomname)
}
}
}
</script>

<style>
body{
margin:0,
}
</style>

最终服务端 中 app.js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http, {
allowEIO3: true, //开启兼容模式 Socket.IO v2客户端的兼容性
cors: {
origin: [ //跨域处理,指定哪些可以请求socket
"http://localhost:8080",
"http://23night.cn:3000"
],
methods: ["GET", "POST"],
credentials: true
}
});

/**
* socket.io 方法
*
* 链接成功方法
* io.on('connection', function (socket) {
*
* socket.id 每次链接不一样,但却是唯一值
* console.log(socket.id);
*
* 用户断开连接 disconnect 是socket.io 内置方法
* socket.on('disconnect',function(){})
*
* })
*
*
* socket.io 大体就两个方法:emit 和on 一个创建事件,一个监听事件
* socket表示用户的连接
* socket.emit 表示触发某个事件 创建触发事件
* socket.emit('xxx', data); 参数1:事件的名称 可以随便起名 参数2:发送的数据
*
* socket.on 表示注册某个事件 注册并监听事件
* socket.on('xxx',function(data){}); 参数1:监听事件的名称 参数2:接收发送的数据
*
* 广播
* 使用io.emit 是发送给所有用户,包括自己,就是广播的意思
* 使用socket.emit 是只给自己发送,一般是告诉自己是:否登录成功,报错信息等
*
* 群聊
* 使用socket.broadcast.emit 不发送消息给自己,而发送消息给其他人
*
* 私聊(方法1)
* io.sockets.sockets 遍历服务器连接对象
* 找到对应的私聊对象
* io.sockets.sockets.forEach(iss=>{
* if(iss.name==data.receiver){
* data.type='user';
* io.to(iss.id).emit('updateChatMessageList',data);
* }
* });
*
* 私聊某人 to(sicket.id) 找到指定的socke.id
* io.to(sicket.id).emit('xxx',data);
*
* 私聊(方法2)
* 根据socket.id 找到对应的socket对象
* const targersocket = io.sockets.sockets.get(socket.id);
* 然后用对应的socket对象.emit 发送消息
* targersocket.emit('xxx',data)
*
* 用户掉线
* socket.on('disconnect', (timeout) => { //... });
*
* room(房间)的概念和使用
* 1. 在不加入或指定room的情况下,socket.io 会默认分配一个default room
* 2. 同一room下的socket可以广播消息
* 3. join(房间名) 加入一个房间;leave(房间名) 离开一个房间;broadcast.to(房间名).emit() 给同一个房间的其他socket广播消息
* socket.join(xxx);//join(房间名)加入房间
*
* //在 socket.IO 3.x 中 3.x 版的新功能是 connected 被重命名为 sockets 并且现在是命名空间上的 ES6 Map。 在房间套接字上是一组 ES6 客户端 ID。
* //这是一个ES6中所有客户端id的集合
const clients = io.sockets.adapter.rooms.get('Room Name');
//获取该房间的客户端数量
const numClients = clients ? clients.size : 0;
//向房间的所有成员发出公告
io.to('Room Name').emit('new event', 'Updates');

for (const clientId of clients ) {
//这是房间中每个客户端的socket
const clientSocket = io.sockets.sockets.get(clientId);
//你可以用它做任何你想做的事 比如:离开房间
clientSocket.leave('Other Room')
}

//4.socket.io 房间发送消息除自己外
//4.1使用socket.broadcast.to()
//socket.broadcast.to()方法允许你指定一个房间,并通过.except()方法排除特定的socket。
io.on('connection', (socket) => {
socket.on('message', (msg) => {
socket.to(roomId).except(socket.id).emit('new message', msg);
});
//4.2使用socket.broadcast.emit()
//如果你不需要特别指定房间,而是想在全局范围内广播消息(但不包括自己),可以直接使用socket.broadcast.emit(),并通过房间过滤。
io.on('connection', (socket) => {
socket.join(roomId); // 加入房间
socket.on('message', (msg) => {
socket.broadcast.to(roomId).emit('new message', msg);
});
});
//4.3使用socket.to()和房间数组
//如果你想要在多个房间之间广播,可以先将socket加入这些房间,然后使用socket.to()。
io.on('connection', (socket) => {
const rooms = ['room1', 'room2']; // 假设你想在多个房间广播
rooms.forEach(room => socket.join(room)); // 加入所有房间
socket.on('message', (msg) => {
io.to(rooms).except(socket.id).emit('new message', msg); // 使用io而不是socket,因为我们要广播到多个房间
});
});
});
*
*/

/**userlist 用户列表 */
const userlist = [];

io.on('connection', function (socket) {
//socket.id 每次链接不一样,但却是唯一值
console.log('新用户加入,socket.id='+socket.id)

//接收登录信息
socket.on('login',function(data,callback){

// 1.判断name是否有值,没有值登录失败
if(!data.name){
callback({code:0,msg:'用户名不能为空'})
}

// 2.判断是否当前对象列表name存在相同,存在相同值
const userinfo = userlist.find(iss => {
if(iss.name==data.name){
return iss
}
});
if(userinfo){
callback({code:1,msg:'success'})
userinfo.id = socket.id;
}else{
callback({code:1,msg:'success'})
//没有name存在相同值,则添加新用户
userlist.push({
id:socket.id,
createtime:data.createtime,
name:data.name,
msg:data.msg,
})
//登录成功,广播给所有用户
io.emit('online',{code:1,msg:'新用户:'+data.name+'进入聊天室',data:userlist})
}
})

//接收私聊消息
socket.on('privateChat',function(data){
console.log(data)
//转发给指定的人
io.to(data.mid).emit('getprivateChat',data);
})

//群聊,把消息转发给别人
socket.on('allChat',function(data){
socket.broadcast.emit('getallChat',data)
})

//用户掉线
socket.on('disconnect', (timeout) => {
console.log('disconnect触发用户掉线了,'+socket.id)
/* 删除用户 */
let index=userlist.findIndex(i=>i.id==socket.id);
if(index!=-1){
let dataname = userlist[index]['name'];
userlist.splice(index,1);
/* 通知前端 */
io.emit('online',{code:1,msg:'用户:'+dataname+'下线',data:userlist});
}
})

//加入房间
socket.on('joinroom',function(data){
console.log('申请加入房间:'+data)
socket.join(data);//join(房间名)加入房间

//room 里面有多少人
const clients = io.sockets.adapter.rooms.get(data);
console.log(clients)
const numClients = clients ? clients.size : 0;
console.log('房间:'+numClients)

/* 通知前端 */
let index=userlist.findIndex(i=>i.id==socket.id);
let dataname = userlist[index]['name'];
// io.emit('online',{code:1,msg:'用户:'+dataname+'加入房间《'+data+'》成功',data:userlist});
io.to(data).emit('getroommsg',{code:1,msg:'用户:'+dataname+'加入房间《'+data+'》成功',data:userlist})
})

//接收room房间,群聊
socket.on('roomsenmsg',function(data){
socket.broadcast.to(data.room).emit('getroomsenmsg',data)
})

//离开房间
socket.on('leaveroom',function(data){
socket.leave(data);
/* 通知前端 */
let index=userlist.findIndex(i=>i.id==socket.id);
let dataname = userlist[index]['name'];
io.to(data).emit('getroommsg',{code:1,msg:'用户:'+dataname+'离开房间《'+data+'》',data:userlist})
})

});

http.listen(3000, function () {
console.log('开启,并监听3000端口');
});