我用Laravel及Larasocket建立了一個即時聊天室，在localhost(127.0.0.1:8000)的環境下，能夠即時聊天，不過當我將即時聊天室host到Heroku時，沒辦法即時聊天，必須重新整理。
這是在localhost環境下的即時聊天室
https://imgur.com/gallery/39boNtz
這是在Heroku環境下的即時聊天室
https://imgur.com/gallery/Hyz6Vid
我的解決方法：
進入Heroku目標專案中的Setting，打開環境變數清單，填入兩個KEY及對應的VALUE。
分別是
BROADCAST_DRIVER ：larasocket
LARASOCKET_TOKEN ： 取得token
已邀請的邦友 {{ invite_list.length }}/5
如果沒錯誤訊息，推測你是用ajax式的。
畢竟如果是sock的話。理論會拿到sock連結失敗的錯誤。
推測你的ajax沒寫錯誤回傳。所以沒拿到錯誤。
我用的應該不是ajax，而是使用laravel broadcasting和vuejs。
resources\js\components\ChatsComponent.vue：
<script>
export default {
data() {
return {
messages: [],
newMessage: "",
};
},
created() {
this.fetchMessages();
//這個部分是所有在該頁面的人，都會處在名為"chat"的broadcast channel，並等待"MessageSentEvent"傳來的新訊息
Echo.private("chat").listen("MessageSentEvent", (e) => {
this.messages.push({
message: e.message.message,
user: e.user,
});
});
},
methods: {
fetchMessages() {
axios.get("/messages").then((response) => {
this.messages = response.data;
});
},
addMessage(message) {
axios
.post("/messages", {
message,
})
.then((response) => {
this.messages.push({
message: response.data.message.message,
user: response.data.user,
});
});
},
//一旦使用者送出訊息後，會呼叫sendMessage函式，而sendMessage函式會呼叫addMessage函式，addMessage函式會將新訊息傳到MessageController做進一步的處理。
sendMessage() {
this.addMessage(this.newMessage);
this.newMessage = "";
},
},
};
</script>
app\Http\Controllers\MessageController.php：
class MessageController extends Controller
{
public function __construct()
{
$this->middleware('auth');
}
public function index()
{
return Message::with('user')->get();
}
public function store(Request $request)
{
$user = Auth::user();
$message = $user->messages()->create([
'message' => $request->input('message')
]);
// 訊息建立成功後，就會將新訊息傳給"MessageSentEvent"做進一步的處理。接著再將回傳值廣播給其他人
broadcast(new MessageSentEvent($message, $user))->toOthers();
return [
'message' => $message,
'user' => $user,
];
}
}
app\Events\MessageSentEvent.php
class MessageSentEvent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $message;
public $user;
/**
* Create a new event instance.
*
* @return void
*/
public function __construct(Message $message, User $user)
{
$this->message = $message;
$this->user = $user;
}
/**
* Get the channels the event should broadcast on.
*
* @return \Illuminate\Broadcasting\Channel|array
*/
public function broadcastOn()
{
//回傳新建好的私人"chat"Channel
return new PrivateChannel('chat');
}
}
routes\channels
Broadcast::channel('chat', function () {
return \Illuminate\Support\Facades\Auth::check();
});
resources\js\bootstrap.js
import Echo from 'laravel-echo';
import Larasocket from 'larasocket-js';
window.Echo = new Echo({
broadcaster: Larasocket,
token: process.env.MIX_LARASOCKET_TOKEN,
});
你明明已經用了 axios 處理。
還在跟我說不是用ajax機制?
抱歉...感謝您的指教。問題已經解決了
iThome鐵人賽
看影片追技術