在meeting_video.vue页面的右侧，是上线参会人列表。只要有参会人进入视频会议室，在这个列表上就要显示出来。反之，如果参会人下线，那么列表中要删除这个参会人。

当参会人进入视频会议室的时候，通过事件监听，我们能获得该参会人的远端流，从远端流里面还能取出参会人的userId，但是在用户列表中我们要显示参会人的部门和姓名，这就需要我们调用Web方法查询。

一、编写持久层代码

在TbUserDao.xml文件中，定义SQL语句。

<select id="searchNameAndDept" parameterType="int" resultType="HashMap">
    SELECT u.name, d.dept_name AS dept
    FROM tb_user u LEFT JOIN tb_dept d ON u.dept_id=d.id
    WHERE u.id = #{userId} AND u.status = 1
</select>
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5

在TbUserDao.java接口中，定义Dao方法。

public interface TbUserDao {
    ……
    public HashMap searchNameAndDept(int userId);
}
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4

二、编写业务层代码

在UserService.java接口中，定义抽象方法。

public interface UserService {
    ……
    public HashMap searchNameAndDept(int userId);
}
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4

在UserServiceImpl.java类中，实现抽象方法。

public class UserServiceImpl implements UserService {
    ……
    @Override
    public HashMap searchNameAndDept(int userId) {
        HashMap map = userDao.searchNameAndDept(userId);
        return map;
    }
}
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8

四、编写Web层代码

创建SearchNameAndDeptForm.java类，封装Ajax提交的数据。

@Data
@Schema(description = "查询用户姓名和部门表单")
public class SearchNameAndDeptForm {
    @NotNull(message = "id不能为空")
    @Min(value = 1, message = "id不能小于1")
    @Schema(description = "用户ID")
    private Integer id;
}
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8

在UserController.java类中，定义Web方法。

public class UserController {
    ……
    @PostMapping("/searchNameAndDept")
    @Operation(summary = "查找员工姓名和部门")
    @SaCheckLogin
    public R searchNameAndDept(@Valid @RequestBody SearchNameAndDeptForm form) {
        HashMap map = userService.searchNameAndDept(form.getId());
        return R.ok(map);
    }
}
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10

五、编写前端代码

写JS代码之前，我们先来看一下上线用户列表是用什么HTML标签设计出来的。

<el-card shadow="never">
    <template #header>
        <div class="card-header"><span>用户列表</span></div>
    </template>
    <el-scrollbar height="555px">
        <ul class="user-list">
            <li v-for="one in userList">
                <img class="mic" src="../assets/trtc/mic.png" />
                <div class="mic-container">
                    <img
                        class="mic-green"
                        :id="'mic-' + one.userId"
                        src="../assets/trtc/mic-green.png"
                    />
                </div>
                <span>{{ one.dept }} - {{ one.name }}</span>
            </li>
        </ul>
    </el-scrollbar>
</el-card>
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在stream-added事件监听函数中，添加JS代码。

client.on('stream-added', event => {
    let remoteStream = event.stream;
    client.subscribe(remoteStream);
    let userId = remoteStream.getUserId();
    //根据新进入会议室的用户ID查询用户新，并且更新到上线用户列表中
    that.$http('user/searchNameAndDept', 'POST', { id: userId }, true, function(resp) {
        let name = resp.name;
        let dept = resp.dept;
        that.userList.push({ userId: userId, name: name, dept: dept });
    });
    ……
});
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6
7
8
9
10
11
12

然后在当前用户连接视频会议室之后，要把自己也加到上线参会人列表中。

//把自己添加到上线用户列表中
that.$http('user/searchNameAndDept', 'POST', { id: that.userId }, true, function(resp) {
    let name = resp.name;
    let dept = resp.dept;
    that.userList.push({ userId: that.userId, name: name, dept: dept });
});
                            
                                                                代码块                            
                            
                                预览                                复制                                
复制成功！
                            
                        
1
2
3
4
5
6