lmsAura.cmp

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:attribute name="lastMessage" type="string"/>
    <lightning:messageChannel type="CarSelectionChannel__c" aura:id="carChannel" onMessage="{!c.handleCarSelectionMessage}"/>
    <lightning:card >
        <div class="red-border">
            <h1 class="slds-text-heading_medium">Aura</h1>
            <br/>
            <p>Please select your car:</p>
            <input type="radio" id="audi" name="car" value="Audi" onclick="{!c.publishEventInMessageChannel}"/>
            <label for="audi">Audi</label><br/>
            <input type="radio" id="tesla" name="car" value="Tesla" onclick="{!c.publishEventInMessageChannel}"/>
            <label for="tesla">Tesla</label><br/>
            <input type="radio" id="bmw" name="car" value="BMW" onclick="{!c.publishEventInMessageChannel}"/>
            <label for="bmw">BMW</label>
            
            <br/>
            <br/>
            <h2>Last message received</h2>
            <br/>
            <div id="lastPayload">
                {!v.lastMessage}
            </div>
        </div>
    </lightning:card>
</aura:component>	

lmsAura.css

.THIS {
    padding: 40px;
}
.THIS .red-border {
    background-color: white;
    border: 3px solid red;
    padding: 50px;
    width: 320px;
    height: 250px;
}

lmsAuraController.js

({
    publishEventInMessageChannel : function(component, event, helper) {
        const payload = { source: "Aura", carName: event.target.value };
        component.find("carChannel").publish(payload);
    },

    handleCarSelectionMessage: function (component, event, helper) {
        const carName = event.getParam("carName");
        const source = event.getParam("source");
        component.set("v.lastMessage", `{source: "${source}", carName: "${carName}"}`);
    }    
})