socker聊天室：2+2完成 那么下面就实现基本通讯no2.

于 2020-04-09 22:02:57 发布
阅读量768 收藏
点赞数
分类专栏： 直播软件开发专栏 文章标签： http https rpc 算法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37870369/article/details/105416439
版权

1.0IM客户端-组件通讯Call设计.

call算法实现：

call.js

export default class call {
    constructor() {
    }
    static callDic={};
    static addCallBack(type,callBack){
        if (this.callDic[type]==null){
            this.callDic[type]=[];
        }
        if (this.hasCallBack(type,callBack)==false){
            this.callDic[type].push({"fun":callBack});
        }

    }
    static hasCallBack(type,callBack){
        if (this.callDic[type]==null){
            return false;
        }
        for (var i=0;i<this.callDic[type].leading;i++){
            if (this.callDic[type][i].fun==callBack){
                return true;
            }
        }
        return false;

    }
    static removeCallBack(evenType,callBack){
        if(this.callDic[eventType]){
            var index = this.getEventIndex(eventType,callBack);
            if(index != -1){
                this.callDic[eventType].aplice(index,i);
            }
        }

    }
    static getEventIndex(evenType,callBack){
        if(!this.callDic[eventType]){
            return -1;
        }
        for(var i=0;i < this.callDic[eventType].length;i++){
            if(this.callDic[eventType][i].fun == callBack){
                return i;
            }
        }
        return -1

    }
    static dispatch(type,data){
        if (this.callDic[type]){
            var callFunc;
            for (var fun in this.callDic[type]){
                callFunc=this.callDic[type][fun];
                callFunc.fun.call(callFunc.this,data);
            }
        }
    }
}

2.0IM客户端-登陆后派发数据.

login/index.js

  login() {

        console.log(this.state.userName);
        Call.dispatch('LoginInfo',{userId: 'makewheels',
        userName: this.state.userName,
            roomId: this.state.roomId,
            roomName: 'r_'+this.state.roomId,
            role: this.state.role
        });

    }

main绑定数据

  componentDidMount(){
        Call.addCallBack('LoginInfo',this.onLoginHandler.bind(this));
    }

测试成功：
在这里插入图片描述

3.0IM客户端-登陆后派发数据.

main.js

   onLoginHandler(data){
        console.log(data);
        this.setState({
            isLogin:true,
            hasUrlParams:false,
            userId:data.userId,
            userName:data.userName,
            roomId:data.roomId,
            roomName:data.roomName,
            role:data.role,
        });
    }

    onHangUpCallBack(){


    }

    getRequest(){
        let url = location.search; //获取url中"?"符后的字串
        let theRequest = new Object();
        if (url.indexOf("?") != -1) {
            let str = url.substr(1);
            let strs = str.split("&");
            for(let i = 0; i < strs.length; i ++) {
                theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }

测试：
在这里插入图片描述

4.0IM客户端-登陆逻辑判断.

media/index.js

import React,{ Component, PropTypes} from 'react';
import css from './css/layout.css';
import Participant from './participants';
import Message from './chat/message';
import UserList from './users/index';
import Call from './call';
import Notify from './notify';
import ChatFeed from './chat/chatfeed';


let client = null;
let sessionId;
let userId;
let userName;
let roomId;
let roomName;
let role;

export default class VideoRoom extends Component{

    constructor(params){
        super(params);
        this.state = {
            users:[],
            userId:params.userId,
            userName:params.userName,
            roomId:params.roomId,
            roomName:params.roomName,
            messages:[],
            role:params.role,
        };
    }

    componentDidMount(){
        this.setState({
            users:[],
            userId:this.props.userId,
            userName:this.props.userName,
            roomId:this.props.roomId,
            roomName:this.props.roomName,
            messages:[],
            role:this.props.role,
        });

        client = new WebSocket('wss://localhost:3002');
        //连接
        client.onopen = () =>{
            console.log("wss connect success...");

            this.register();
        };

        client.onmessage = (e) => {

            var parsedMessage = JSON.parse(e.data);

            console.info('Received message: ' + parsedMessage.type);

            switch(parsedMessage.type){
                case 'existingParticipants':
                    console.log('existingParticipants');
                    this.onExistingParticipants(parsedMessage);
                    break;
                case 'newParticipantArrived':
                    console.log('newParticipantArrived');
                    this.onNewParticipant(parsedMessage);
                    break;
                case 'participantLeft':
                    console.log('participantLeft');
                    this.onParticipantLeft(parsedMessage);
                    break;
                case 'chat_public':
                    console.log("chat_public:" + parsedMessage.msg);

                    let arr = this.state.messages;
                    let uid = 1;
                    if(parsedMessage.userId == userId){
                        uid = 0;
                    }else{
                        uid = 1;
                    }
                    arr.push(new Message({id:uid,message:parsedMessage.msg,senderName:parsedMessage.userName}));
                    this.setState({
                        message:arr,
                    });
                    break;
                default:
                    console.error('Unrecognized message',parsedMessage);

            }

        }

        client.onerror = (e) => {
            console.log('服务端返回消息onerror::' + e.data);
        }

        client.onclose = (e) => {
            console.log('服务端返回消息onclose::' + e.data);
        }


        Call.addCallBack(Notify.ON_INPUT_MESSAGE,this.onInputMessage.bind(this));
    }


    componentWillUnmount(){
        console.log('componentWillUnmount==================');
    }

    /**
     * 注册并登录房间
     */
    register(){
        sessionId = this.getRandomUserId();
        userId = this.state.userId;
        userName = this.state.userName;

        roomId = this.state.roomId;
        roomName = this.state.roomName;
        role = this.state.role;

        var message = {
            type:'joinRoom',
            sessionId:sessionId,
            userId:userId,
            userName:userName,
            roomId:roomId,
            roomName:'demo',
            role:role,
        }
        this.sendMessage(message);
    }

    onExistingParticipants(msg){
        console.log(sessionId + " 登录成功");

        var participant = new Participant();
        participant.sessionId = sessionId;
        participant.userId = userId;
        participant.userName = userName;
        participant.role = role;

        const users = this.state.users;
        users.push(participant);
        this.setState({users:users});

        msg.data.forEach(this.addParticipant.bind(this));
    }

    onNewParticipant(userSession){
        this.addParticipant(userSession);
    }

    addParticipant(userSession){

        var participant = new Participant();
        participant.sessionId = userSession.sessionId;
        participant.userId = userSession.userId;
        participant.userName = userSession.userName;
        participant.role = userSession.role;

        const users = this.state.users;
        users.push(participant);
        this.setState({users:users});

        console.log(this.state.users);

    }

    onParticipantLeft(request){
        console.log('Participant ' + request.sessionId + ' left');

        const users = this.state.users;
        for(let u = 0; u < users.length; u++){
            let item = users[u];
            if(item.sessionId == request.sessionId){
                users.splice(u,1);
                break;
            }
        }
        this.setState({users:users});
    }


    sendMessage(message){
        console.log('Sending message:' + message.type);
        if(client){
            client.send(JSON.stringify(message));
        }
    }

    //获取6位随机id
    getRandomUserId(){
        var num = "";
        for(var i=0; i<6; i++){
            num+= Math.floor(Math.random()*10)
        }
        return num;
    }


    onInputMessage(data){
        console.log("SendMessage::" +data);

        var message = {
            type:'chat_public',
            sessionId:sessionId,
            userId:userId,
            userName:userName,
            roomId:roomId,
            roomName:'demo',
            msg:data,
        }
        this.sendMessage(message);
    }


    render(){
        return(
            <div style={{width:this.props.width?this.props.width:'100%',height:this.props.height?this.props.height:'100%',}} className={css.mainContainer}>
            <iframe src={"./player/aliplayer.html?roomId=" + this.state.roomId} className={css.videoContainer}>
            </iframe>

            <div className={css.rightContainer}>
            <div className={css.userListContainer}>
            <UserList users={this.state.users}/>
        </div>
        <ChatFeed messages={this.state.messages}></ChatFeed>
            </div>

            </div>
    );
    }

}


VideoRoom.PropTypes = {
    userId: React.PropTypes.string.isRequired,//用户id
    userName: React.PropTypes.string.isRequired,//用户名
    roomId: React.PropTypes.string.isRequired,//房间id
    roomName: React.PropTypes.string.isRequired,//房间名称
    role: React.PropTypes.string.isRequired,//角色
    closeVideoRoom: React.PropTypes.func,//挂断视频房间
}

4.0IM客户端-聊天室设计.

新建目录

在这里插入图片描述

5.0IM客户端-前后端通讯方法.

在这里插入图片描述

TCP/IP（Transmission Control Protocol/Internet Protocol）即传输控制协议/网间协议，是一个工业标准的协议集，它是为广域网（WANs）设计的。
UDP（User Data Protocol，用户数据报协议）是与TCP相对应的协议。它是属于TCP/IP协议族中的一种。

在这里插入图片描述

socket抽象结构

在这里插入图片描述

服务器端先初始化Socket，然后与端口绑定(bind)，对端口进行监听(listen)，调用accept阻塞，等待客户端连接。在这时如果有个客户端初始化一个Socket，然后连接服务器(connect)，如果连接成功，这时客户端与服务器端的连接就建立了。客户端发送数据请求，服务器端接收请求并处理请求，然后把回应数据发送给客户端，客户端读取数据，最后关闭连接，一次交互结束。

聊天室通讯设计：

  1. socket连接
  2. 当前聊天室存在的用户下发
  3. 有新成员进入聊天室
  4. 有成员退出聊天室
  5. 有公共消息转发

5.0IM客户端-Socket连接处理.

持续更新中.

    client = new WebSocket('wss://localhost:3002');
        //连接
        client.onopen=()=>{
            console.log("connect success...")
            this.register();
        };
        client.onmessage=(e)=>{
            var parsedMessage=JSON.parse(e.data);
            console.info('message'+parsedMessage.type);
            switch(parsedMessage.type){
                case 'existingParticipants':
                    console.log('existingParticipants');
                    this.onExistingParticipants(parsedMessage);
                    break;
                case 'newParticipantArrived':
                    console.log('newParticipantArrived');
                    this.onNewParticipant(parsedMessage);
                    break;
                case 'participantLeft':
                    console.log('participantLeft');
                    this.onParticipantLeft(parsedMessage);
                    break;
                case 'chat_public':
                    console.log("chat_public:" + parsedMessage.msg);

                    let arr = this.state.messages;
                    let uid = 1;
                    if(parsedMessage.userId == userId){
                        uid = 0;
                    }else{
                        uid = 1;
                    }
                    arr.push(new Message({id:uid,message:parsedMessage.msg,senderName:parsedMessage.userName}));
                    this.setState({
                        message:arr,
                    });
                    break;
                default:
                    console.error('Unrecognized message',parsedMessage);

            }
        }

新用户加入数据处理：

import React,{ Component } from 'react'

export default class Participant extends Component{

    constructor(props){
        super(props)
    }

    componentDidMount(){

    }

    render(){
        return(
            <div></div>
        )
    }

}


    onNewParticipant(userSession){
       this.addParticipant(userSession);
    }

    addParticipant(userSession){

        var participant = new Participant();
        participant.sessionId = userSession.sessionId;
        participant.userId = userSession.userId;
        participant.userName = userSession.userName;
        participant.role = userSession.role;

        const users = this.state.users;
        users.push(participant);
        this.setState({users:users});
        console.log(this.state.users);
    }

已经存在用户数据处理：

      onExistingParticipants(msg){
        console.log(sessionId + " 登录成功");

        var participant = new Participant();
        participant.sessionId = sessionId;
        participant.userId = userId;
        participant.userName = userName;
        participant.role = role;

        const users = this.state.users;
        users.push(participant);
        this.setState({users:users});

        msg.data.forEach(this.addParticipant.bind(this));
    }
x.1000001000
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
从头实现深度学习的对话系统--新版本tf seq2seq API构建chatbot
呜呜哈的博客
01-10 8730
上篇文章我们使用tf.contrib.legacy_seq2seq下的API构建了一个简单的chatbot对话系统，但是我们已经说过，这部分代码是1.0版本之前所提供的API，将来会被弃用，而且API接口并不灵活，在实际使用过程中还会存在版本不同导致的各种个样的错误。所以我们有必要学习一下新版本的API，这里先来说一下二者的不同： 新版本都是用dynamic_rnn来构造RNN模型，这样就避免
webrtc笔记(5): 基于kurento media server的多人视频聊天示例
weixin_30823001的博客
07-14 773
这是kurento tutorial中的一个例子(groupCall)，用于多人音视频通话，效果如下： 登录界面： 聊天界面： 运行方法： 1、本地用docker把kurento server跑起来 2、idea里启用这个项目 3、浏览器里输入https://localhost:8443/ 输入用户名、房间号，然后再开一个浏览器tab页，输入一个不同的用户名，房间号与第1个...
web直播+聊天室功能（阿里云播放器和即时通信IM聊天、消息自动滚动）
Khun_HWJ的博客
02-10 4761
左边为视频直播，右边为聊天 解决问题： 1、直播的时候，播放器可以点击，并且可以暂停，解决办法是在播放器上加一次遮罩 2、tim聊天功能要注册阿里云的账号，下载自己的sdk和js插件 3、直播功能下载阿里云的prismplayer播放器插件 4、消息自动滚动var scrollDiv = document.getElementById('demo'); scrollDiv.scrollTop = ...
python用itchat完成微信连接对话
weixin_44207181的博客
04-26 1007
工具pycharm，python3.7 1.安装 pip install itchat 2.步骤 itchat的注册是根据类型注册的，在获取相应类型的信息时会调用该函数。 import itchat from itchat.content import * @itchat.msg_register([TEXT, CARD, NOTE, SHARING]) #主要就是TEXT类型，其他的也...
自然语言处理系列-chat-bot(2)
Cutepingping的博客
01-27 226
1. 准备对话数据 2. 搭建seq2seq模型 3. 训练模型，并预测聊天效果 通过使用“字典”和“语料”，已经完成了第一步的工作。 本文采用seq2seq模型来进行解决 主要为：输入问句-编码-解码-输出答句 此处，“输入问题 – 编码 – 解码 – 输出答句”就构成了一套完整的seq2seq模型。 第一个环节-输入问句 第二个环节-编码 编码过程，实际上就是算法...
JAVA作业 sockect编程实现聊天室（一服务器多客户端）
科研糖
12-20 2272
题目：利用多线程、Socket编程、GUI编写一个聊天室，客户端可以发送信息，服务器将接收到的每个用户端的信息实时发送给其他客户端。（提示：服务器为每个客户端启动一个单独线程，客户端启动一个单独线程接收服务器发送来的其他客户端的信息） 思想： 唔由于该死的拖延症现在才做最后这道做烂的题目，基础多线程、Socket编程练习，各种异常注意处理（折磨 实现客户端如图： 实现代码： pac
linux_Socker.rar_linux socker_socker_socker c语言
09-24
本文将深入探讨Linux服务端Socket编程，主要使用C语言来实现。C语言是操作系统编程的基础，也是编写Socket程序的常用语言，因为它提供了低级别的控制，能够灵活地处理网络通信。 一、Socket基本概念 Socket可以视...
ng-chat-app:这是最简单的聊天应用程序angular和socker.io
05-28
这个项目展示了如何在Web环境中实现实时通信功能，使用户能够进行实时的文本聊天。Angular是一款流行的前端开发框架，由Google维护，它提供了强大的组件化、模版驱动的开发模式，适合构建复杂的单页应用（SPA）。而...
socker.io
03-06
5. **房间（Namespace）**：Socket.IO允许创建多个命名空间，每个命名空间就像是一个独立的聊天室，用户可以选择加入不同的房间进行通信。 6. **心跳检测**：Socket.IO内置心跳机制，可以定期发送心跳包来检测连接...
Socket 2 Key B-M SATA-based SSD Adapter Pinout
01-16
NGFF m.2接口定义，KEYB SATA协议 Socket 2 NGFF m.2接口定义，KEYB SATA协议 Socket 2
socker:检查SOCKS代理列表以查找工作代理
05-04
袜子 检查有效的SOCKS4 / 5代理。 此代码是Python3端口，该端口在Python2中写过。此代码在python3上运行。... python3 socker.py -u proxlylist1.site -u proxlylist2.site -o <file> -th <threads> -
孙鑫VC学习笔记：第十五讲 编写一个基于MFC对话框的聊天程序
遐迩思的专栏
08-20 5815
编写一个基于MFC对话框的聊天程序：1.新建一个基于MFC项目工程Chat2.加载套接字库，有下面两种方法，在这里选择第二种方法，因为更方便。方法一、使用WSAStartup()加载套接字库 参考MSDN中的范例代码,拷贝到自己的程序中修改即可。 注意不再使用套接字后调用WSACleanup()。方法二、使用AfxSocketInit()加载套接字库（MFC） BOOL AfxSocketIn
RTP协议转发视频流
SmithYan的博客
01-08 4083
RTP转发 做完上次的读取摄像头之后，项目需要将视频转发给客户端，所以研究了下RTP并且做了一个小程序测试功能，现在分享出来。 原料：VS2017，RTP.NET，摄像头 语言：C# 标签：EmguCV，C#，读取摄像头，NuGet,RTP GitHub源码：https://github.com/SmithYan/RTPTransmit 百度网盘链接：https://pan.baidu.com/s...
用unity3d实现简单chat对话
ly209的专栏
04-12 5985
--------------------------------------------------------------- 1.      awake 【设计游戏窗口 获取玩家名字】 2.      ongui 【判断是否显示聊天窗口 创建聊天窗口 处理回车[获取输入焦点]】 3.      创建聊天窗口 【创建滚动条 滚动条中从对话表中逐句读取对话处理回车[传出对话]以及鼠标左键[失焦
分析：直播流媒体服务器分析
x.1000001000的博客
04-07 2533
项目GitHub开源地址：https://github.com/makewheels-zzq/ml-live 前言： 上篇文章主要介绍了，传输协议。以及一个流媒体SRS。 SRS不必赘述，在对比一下其他流媒体以便做技术选型. 流媒体服务器-NginxRtmp Nginx介绍： 详细介绍点我 NginxRtmp项目地址： https://github.com/arut/nginx-rtmp-mod...
解析：直播程序技术解析.
x.1000001000的博客
04-06 2241
项目GitHub开源地址：https://github.com/makewheels-zzq/ml-live 直播的原理. 1.把主播正在录制的视频实时推送到服务器.再由服务器分发给下面的观众看. 直播的处理. 1.推流端：采集，美颜处理,编码,推流处理. 2.服务器端处理：转码，录制，截图，鉴黄. 3.播放器:拉流，解码，渲染. 4.互动系统：聊天室，礼物系统，点赞. 直播流程. 需求分析...
开篇 ：直播软件分析.
x.1000001000的博客
04-05 1143
前言: 本人为个人开发者 .最近一段时间 因为一些原因 正式接触直播.打算从底层到应用编写一套基于Android Ios Web端 编写一套的直播软件. 程序员的思维总是很直白 去动手写自己的项目验证想法. 如果我有一千万，我就能买一栋房子。 我有一千万吗？没有。 所以我仍然没有房子。 如果我有翅膀，我就能飞。 我有翅膀吗？没有。 所以我也没办法飞。 如果把整个太平洋的水倒出，也浇不熄我对你爱情的...
环境：直播程序环境搭建
x.1000001000的博客
04-07 539
环境搭建： 本地服务器：CenterOs8 开发环境：jdk1.8 数据库：MySQL docker版本：19.03.7 移动端选用：Flutter 微信小程序. 搭建SRS服务器 基于docker安装srs服务器. 这里我拉取镜，docker拉取镜像： docker pull ossrs/srs ...
socker简易聊天室基本需求
最新发布
09-10
以上是一个简易的Socket聊天室的基本需求，实现起来需要综合考虑以上因素。 ### 回答2： 一个简易的socker聊天室的基本需求包括以下几点： 1. 用户注册和登录功能：用户需要能够通过注册用户名和密码来创建一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值