difference between chrome.runtime.onmessage and chrome.runtime.port onmessage event - google-chrome-extension

Question

My below contentscript.js receives the message only to chrome.runtime.onMessage.addListener but not to port.onMessage.addListener
console.log("loaded");
var port = chrome.runtime.connect({name: "knockknock"});
port.postMessage({joke: "Knock knock"});
port.onMessage.addListener(function(msg) {
port.postMessage({answer: "Madame... Bovary"});
});
chrome.runtime.onMessage.addListener(function (msg, sender, response) {
console.log("cs:on message ");
});
I send the following message from my backgroundscript.js:
chrome.tabs.query({
active: true,
currentWindow: true
}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
console.log("message sent");
});
});
Why doesn't my port.onMessage.addListener not triggered though its initialized.

Answer 1

From https://developer.chrome.com/extensions/messaging :
In order to handle incoming connections, you need to set up a
runtime.onConnect event listener. This looks the same from a content
script or an extension page. When another part of your extension calls
"connect()", this event is fired, along with the runtime.Port object
you can use to send and receive messages through the connection.
Here's what it looks like to respond to incoming connections:
chrome.runtime.onConnect.addListener(function(port) {
console.assert(port.name == "knockknock");
port.onMessage.addListener(function(msg) {
if (msg.joke == "Knock knock")
port.postMessage({question: "Who's there?"});
else if (msg.answer == "Madame")
port.postMessage({question: "Madame who?"});
else if (msg.answer == "Madame... Bovary")
port.postMessage({question: "I don't get it."});
});
});
So this is how you would catch your message from the specific port:
chrome.runtime.onConnect.addListener(function(port) {
port.onMessage.addListener(function(msg) {
console.log(msg) // msg object will be your message
})
})