Thảo luận

đã bình luận cho bài viết

Dockerize ứng dụng chat realtime với Laravel, Nginx, VueJS, Laravel Echo, Laravel Reverb của

thg 1 21, 2021 2:31 CH

Khi 1 client kết nối thì đầu tiên nó phải tới Laravel Echo Server trước, mà ở phía Laravel Echo server e còn chưa thấy j thì 96,69% đoạn kết nối tới Laravel Echo ở file bootstrap.js của e đang có vấn đề.

Đầu tiên khả năng cao e đang dùng laravel-echo-server bản mới nên nó ko khớp với socket.io-client e định nghĩa ở file bootstrap.js nữa (lỗi này đã có 1 bạn nhắn a ở bài Viết ứng dụng chat realtime .... rồi). A cũng đã update bài đó nhưng a chưa có tgian update lại cho các bài này. Đầu tiên e giúp a sửa lại file resource/views/app.blade.php, như sau:

<body>
        <div id="app" class="h-100"></div>
        <script src="http://localhost:4000/socket.io/socket.io.js"></script>
        <script>window.__app__ = @json($data)</script>
        <script src="{{ mix('js/manifest.js') }}"></script>
        <script src="{{ mix('js/vendor.js') }}"></script>
        <script src="{{ mix('js/app.js') }}"></script>
    ..................
    </body>

Chú ý rằng bên trên a đã thêm vào đoạn script để import socket.io, đây là ta đang import thư viện socket.io-client được cung cấp bởi laravel-echo-server (nên nó sẽ tương thích). Sau đó ở file bootstrap.js e comment đoạn sau lại:

import Echo from 'laravel-echo'

// window.io = require('socket.io-client') // comment dòng này <<----------

window.Echo = new Echo({
  broadcaster: 'socket.io',
  host: `${window.location.protocol}//${window.location.hostname}:${process.env.MIX_FRONTEND_PORT}`
})

Sửa code Vue nên e phải build lại frontend nhé:

docker run --rm -v "/$(pwd)":/app -w //app node npm run prod

Sau đó thì e chạy lại project như bình thường, cùng với đó e kiểm tra kĩ cho a:

e mở Chrome Developer tool xem còn báo lỗi j ko nhé
sau đó check ở đoạn cấu hình Nginx đã có block location /socket.io hay chưa, đã proxy_pass vào đúng tên service laravel_echo_server:6001 hay chưa
file .env đã có MIX_FRONTEND_PORT=4000 hay chưa

Nguyễn Đức Hoàng

đã bình luận cho bài viết

Instagram - Thiết Kế Hệ Thống có gì hay? 💻 của

Khánh Ney

thg 1 21, 2021 2:24 CH

@khanhney thank bác

Hunq Vux

đã bình luận cho bài viết

3 cách giúp bạn loại bỏ "any" trong typescript của

Hunq Vux

thg 1 21, 2021 2:24 CH

cảm ơn bạn nhé

Nguyen Van Duc

đã bình luận cho bài viết

Bacteria classification bằng thư viện fastai của

Hieu Bui

thg 1 21, 2021 11:35 SA

Võ Thanh Liêm

đã bình luận cho bài viết

Kinh nghiệm thi chứng chỉ AWS Certified Solutions Architect – Associate của

Mầu Hà Quang

thg 1 21, 2021 11:32 SA

thank anh, em đang dự tính học

Tuzaku

đã bình luận cho bài viết

Performance Optimization 101: Những câu hỏi cơ bản của

Minh Monmen

thg 1 21, 2021 11:29 SA

Bài này ko phải mấy bài được dịch từ web tiếng anh (m đoán vậy ) nên m đọc thấy trôi hơn hẳn, hóng những bài còn lại của series

Mai Trung Đức

đã bình luận cho bài viết

Bài 16: Sử dụng axios để gọi Laravel API trong VueJS của

Mai Trung Đức

thg 1 21, 2021 10:27 SA

@vietgroup chào bạn, ở trên đoạn getAllCategory, bên trong then đoạn forEach đoạn đó phải là this.listCategory.forEach chứ nhỉ, sao lại trường data ở bên trong listCategory là thế nào vậy bạn?

Khâm Đình

đã bình luận cho bài viết

[Front-end Developer] Một vài mẹo để viết code CSS chuyên nghiệp hơn của

Nguyen Quang Phu

thg 1 21, 2021 9:52 SA

@quangphunguyen Thật nhọ là mình dùng BEM để đặt class css xong bị chửi sml và bắt phải sửa hết lại. Lý do là mình đặt class box-products_content thì khi anh ấy kích đúp để coppy lại chỉ bôi đen được đoạn products_content mà không được cả cụm.Do đó coppy nó bị chậm.

Bui Van Hieu

đã bình luận cho bài viết

Cách tốt hơn để truyền dữ liệu giữa các Activities: Activity Results API của

Bui Van Hieu

thg 1 21, 2021 9:51 SA

Thank you

Nghĩa Võ Văn

đã bình luận cho bài viết

Xây dựng desktop app với Electron, React và Lumen của

Tiny Cat

thg 1 21, 2021 9:47 SA

Hay

Pham Hoc

đã bình luận cho bài viết

Thực hành: Tự 'Cốt' ảnh động - SVG animation của

Phạm Thu Hằng

thg 1 21, 2021 9:41 SA

@bunny.pi.green top trend nhé =)))

Nguyen Quang Phu

đã bình luận cho bài viết

4 toán tử JavaScript quên sầu luôn :) của

Cuộc sống mà

thg 1 21, 2021 9:41 SA

sao đọc xong mà vẫn thấy sầu nhỉ

Phan Van Nhat

đã bình luận cho bài viết

Cách tốt hơn để truyền dữ liệu giữa các Activities: Activity Results API của

Bui Van Hieu

thg 1 21, 2021 9:28 SA

Oh no! Amazing!

ngocyen

đã bình luận cho bài viết

Hướng dẫn tạo hiệu ứng tuyết rơi với Canvas HTML5 của

Phan Van Hung

thg 1 21, 2021 9:25 SA

phát hiện cái bug to bằng cái thúng fix đi nhé

Phạm Thu Hằng

đã bình luận cho bài viết

Thực hành: Tự 'Cốt' ảnh động - SVG animation của

Phạm Thu Hằng

thg 1 21, 2021 9:24 SA

cute để giật tít cho hiệu quả =))

Khanh

đã bình luận cho bài viết

Severity (Mức độ nghiêm trọng) & Priority (Mức độ ưu tiên) trong Testing: Sự khác biệt và ví dụ của

Linh B Nguyễn Thị

thg 1 21, 2021 9:09 SA

bài viết hay quá

Hoang Trong Hieu

đã bình luận cho bài viết

User Acceptance Testing (UAT) là gì? Các loại User Acceptance Testing của

Vũ Thị Nga

thg 1 21, 2021 9:06 SA

ok

ngocyen

đã bình luận cho bài viết

Dùng Canvas vẽ bất cứ cái gì ta muốn của

ngocyen

thg 1 21, 2021 9:05 SA

ko còn câu nào khác ah e

Phan Van Hung

đã bình luận cho bài viết

Dùng Canvas vẽ bất cứ cái gì ta muốn của

ngocyen

thg 1 21, 2021 8:58 SA

Bài viết ý nghĩa quá !

Anh Tuấn

đã bình luận cho bài viết

Bài 16: Sử dụng axios để gọi Laravel API trong VueJS của

Mai Trung Đức

thg 1 21, 2021 8:55 SA

@maitrungduc1410 mình sử dụng "npm install laravel-vue-pagination" để làm phân trang

code php laravel:

$categorys = InterfaceCat::get()->paginate(10);
return response($categorys, 200);

code html:

<pagination :data="listCategory" :limit="2" :align="'center'" @pagination-change-page="getAllCategory">
			<span slot="prev-nav">{{trans('Langcore::global.Previous')}}</span>
			<span slot="next-nav">{{trans('Langcore::global.Next')}}</span>
		</pagination>

code vuejs load data mình viết thế này:

<script>
getAllCategory(page=1){
				axios.get(route('interfacepackage.admin.listcategory'),{params:{page:page}})
				.then(response=>{
					this.listCategory = response.data;
    				this.listCategory.data.forEach(item => {
                        Vue.set(item, 'isEdit', false)
                    });
				})
				.catch(error=>{
					if (error.response) {
	    				this.errors = error.response.data.errors.name
	    			}
				})
			}
</script>

Bạn xem giúp mình, cám ơn bạn rất nhiều

THẢO LUẬN