Phoenix框架封装Join方法后WebSocket握手断开问题求助

嘿，我一眼就揪出问题所在啦——你在JavaScript代码里误用了Elixir的字符串插值语法！

问题根源 #

在你的createSocket函数中，你写了：

let channel = socket.channel(`comments:%{topicId}`, {});

这里的%{topicId}是Elixir的变量插值方式，但JavaScript的模板字符串需要用${变量名}的格式来实现变量替换。这就导致Channel的topic名称变成了字面量的comments:%{topicId}，而不是动态替换成传入的topicId值。Phoenix服务器找不到匹配这个错误topic的Channel，自然就在握手阶段断开了WebSocket连接。

修正后的代码 #

只需要把插值语法改成JavaScript的模板字符串格式即可：

socket.connect();
const createSocket = topicId => {
 let channel = socket.channel(`comments:${topicId}`, {});
 channel
 .join()
 .receive('ok', resp => { console.log('Joined successfully', resp); })
 .receive('error', resp => { console.log('Unable to join', resp); });
};
window.createSocket = createSocket;

额外排查小技巧 #

你可以打开浏览器开发者工具的Network面板，查看WebSocket的请求地址，确认topic是否已经正确替换成了实际的ID值，这样以后遇到类似的连接问题也能快速定位原因。

内容的提问来源于stack exchange，提问作者Honest Raj