ServiceChatカスタマーサービスチャット
導入する
ServiceChatは、クライアントとカスタマーサービスを含む、node.jsで実行されるカスタマーサービスチャットページのセットです。ノードに配置する本来の目的は、フロントエンドを学習する人が簡単に開始できるようにすることです。プロジェクト全体が豊富です。機能的にはメンテナンス性が悪いので書いてください。機能とページがすべて同じページにあるので、最初は急いでやったのですが、使い方の問題は全く気になりません。この書き方にご満足いただけない場合は、ご自身でパッケージを抽出していただけますので、よろしくお願いいたします。
機能リスト
- ロボットスマートチャット
- オンラインおよびオフラインのカスタマーサービスマニュアル
- ユーザーは積極的にカスタマーサービスに情報を送信します（情報にはテキストと絵文字が含まれます）
- カスタマーサービスはセッションメンバーを選択し、ユーザーに情報（テキストや顔文字などの情報）を積極的に送信します
- ユーザー/顧客は、相手方から送信された情報を受け取ります
- カスタマーサービスは自動的にユーザーセッションを閉じ、オフラインリストにはオフラインユーザーが表示され、クライアントはカスタマーサービスにセッションをアクティブに閉じるように促し、セッションは終了します
- カスタマーサービスは手動でオフラインになり、すべての会話リストをクリアし、クライアントはカスタマーサービスがオフラインであることを示すプロンプトを表示し、セッションは終了します
- カスタマーサービスはページを更新または閉じてオフラインになり、すべてのセッションのリストをクリアします。クライアントはカスタマーサービスがオフラインであることを確認し、セッションを終了します。
- ユーザーがページを更新するかページを閉じると、カスタマーサービス端末はユーザーにオフラインになるように促し、セッションは終了します
- カスタマーサービスは、右側のツールバーを切り替え、[クイック返信]を選択し、[クイック返信情報]を選択してコンテンツにすばやく返信します。
- 情報を送信します。サーバーが中断された場合、情報ステータスは0（送信されません）です。サーバーが20秒以内に切断されたままの場合、情報ステータスは-1（送信失敗）に変更されます。サーバーが20秒以内に回復した場合、情報ステータスが1に変更されます（正常に送信されました）
- クライアント側でproductIdを追加すると、ユーザーは製品カードを送信できます
- カスタマーサービスは、ユーザーから送信された製品カードを受け取り、詳細を確認します
- 画像の送信を完了します。画像が大きすぎる場合は、画像を圧縮します。画像が大きすぎる場合は、送信できません。
- 完全な画像受信、表示
- 複数のデバイスがオンラインの場合、別のデバイスを強制的にオフラインにします
- 複数のカスタマーサービスデバイスがオンラインの場合、古いカスタマーサービス端末は強制的にオフラインになり、メンバーのセッションが中断されます
プロジェクトアドレス
GitHub：https
://github.com/Arles-hsh/ServiceChatコードクラウド：https ：//gitee.com/service-chat/service-chat
このプロジェクトに興味のある方は、「スター」をクリックして応援してください。ありがとうございます！
ご不明な点やご提案がございましたら、コメント欄にご記入ください。コメントは大歓迎です！
レンダリング
クライアントはカスタマーサービスインターフェースに入ります：
注：手動転送の機能を実装する必要があるため、すべてのアクセスはパラメーター、つまりアドレスのsendIdで行われ、目的はユーザーの情報を取得することです。なお、ユーザー端末は携帯端末を使用しているため、ブラウザでf12までに携帯電話のシミュレータをオンにする必要があります
。機能ユーザーオフラインまたはカスタマーサービスオフライン通知カード送信機能注：現時点では、閲覧された製品をシミュレートするために、addressパラメーターにはより多くのproductIdがあります
関数のデモは当分の間であり、友人が探索するのを待っている多くの関数があります。上で示したsendIdとproductIdが対応するユーザーと製品の情報とどのように一致するのか疑問に思う人もいるでしょう。実際、私はそれをバックエンドに配置しました。 jsonアレイでは、データベース内のデータをシミュレートすることを目的としています。さらに、クイック返信、ユーザーメッセージ、ロボット返信用のjson情報があります。
次に、プロジェクトのクローンを作成した後、プロジェクトを稼働させるために何をする必要がありますか
依存関係をインストールする
- バックエンドで次のコマンドを順番に入力します。
cd service
npm install
node app.js
- フロントエンドで次のコマンドを順番に入力します。
cd chatroom
npm install
npm run serve
実行中のブラウザ
クライアントを開きます：http：// localhost：8080 /？sendId = 3
クライアントを開きます：http：// localhost：8080 /？sendId = 1
カードを送信する必要がある場合は、クライアントを開きます：http：// localhost：8080 /？sendId = 3＆productId = 300
特定のパラメーターに対応する情報については、userList.jsonファイルとproduct.jsonファイルを表示できます。
これまでのところ、これが行われ、カスタマーサービスプロジェクトの最終的な効果が表示されます。
簡単な説明
- バックエンド処理：
2。フロントエンドChat.vueはコアファイルです。理解するには時間がかかります。htmlやcssのスタイルはたくさんありますが、基本を理解していれば理解するのは難しくありません。 。難しいのはjsかもしれません。処理ロジックは、理解していないといつでも邪魔をする可能性があります〜
あとがき
プロジェクト自体は、実際にはC＃のSignalerフレームワークを使用して完了します。他の言語が含まれるため、多くのフロントエンド学習者にとってあまり友好的ではないため、プロジェクトをフロントエンドに転送してより多くの情報を提供する方法を考えています。フロントエンドの趣味なので、古いプロジェクトを抽出、改善、完成させて最終的な効果を得るのに多くの時間を費やしました。その中で、ノードはそれほど多くのこと、つまり単純なjsを必要としません。誰もが簡単に始められます。 。最後に、学習中の参照用にソケットマニュアルを添付してください：socket.io中国語マニュアル