Resources
9 |-
10 |
- 11 | Guides & Docs 12 | 13 |
- 14 | Source 15 | 16 |
- 17 | v1.4 Changelog 18 | 19 |
├── .formatter.exs ├── .gitignore ├── LICENSE ├── README.md ├── assets ├── .babelrc ├── css │ ├── app.css │ └── phoenix.css ├── js │ ├── app.js │ └── socket.js ├── package-lock.json ├── package.json ├── static │ ├── favicon.ico │ ├── images │ │ └── phoenix.png │ └── robots.txt └── webpack.config.js ├── config ├── config.exs ├── dev.exs ├── prod.exs └── test.exs ├── lib ├── phat.ex ├── phat │ ├── accounts.ex │ ├── accounts │ │ └── user.ex │ ├── application.ex │ ├── chats.ex │ ├── chats │ │ ├── chat.ex │ │ └── message.ex │ └── repo.ex ├── phat_web.ex └── phat_web │ ├── channels │ └── user_socket.ex │ ├── controllers │ ├── chat_controller.ex │ ├── page_controller.ex │ ├── session_controller.ex │ └── user_controller.ex │ ├── endpoint.ex │ ├── gettext.ex │ ├── live │ └── chat_live_view.ex │ ├── presence.ex │ ├── router.ex │ ├── services │ └── session.ex │ ├── templates │ ├── chat │ │ ├── index.html.eex │ │ └── show.html.leex │ ├── layout │ │ └── app.html.eex │ ├── page │ │ └── index.html.eex │ ├── session │ │ └── new.html.eex │ └── user │ │ ├── new.html.eex │ │ └── show.html.eex │ └── views │ ├── chat_view.ex │ ├── error_helpers.ex │ ├── error_view.ex │ ├── layout_view.ex │ ├── page_view.ex │ ├── session_view.ex │ └── user_view.ex ├── mix.exs ├── mix.lock ├── priv ├── gettext │ ├── en │ │ └── LC_MESSAGES │ │ │ └── errors.po │ └── errors.pot └── repo │ ├── migrations │ ├── .formatter.exs │ ├── 20190504103118_add_users_table.exs │ ├── 20190504103124_add_chats_table.exs │ └── 20190504103131_add_messages_table.exs │ └── seeds.exs └── test ├── phat_web ├── controllers │ └── page_controller_test.exs └── views │ ├── error_view_test.exs │ ├── layout_view_test.exs │ └── page_view_test.exs ├── support ├── channel_case.ex ├── conn_case.ex └── data_case.ex └── test_helper.exs /.formatter.exs: -------------------------------------------------------------------------------- 1 | [ 2 | import_deps: [:ecto, :phoenix], 3 | inputs: ["*.{ex,exs}", "priv/*/seeds.exs", "{config,lib,test}/**/*.{ex,exs}"], 4 | subdirectories: ["priv/*/migrations"] 5 | ] 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # The directory Mix will write compiled artifacts to. 2 | /_build/ 3 | 4 | # If you run "mix test --cover", coverage assets end up here. 5 | /cover/ 6 | 7 | # The directory Mix downloads your dependencies sources to. 8 | /deps/ 9 | 10 | # Where 3rd-party dependencies like ExDoc output generated docs. 11 | /doc/ 12 | 13 | # Ignore .fetch files in case you like to edit your project deps locally. 14 | /.fetch 15 | 16 | # If the VM crashes, it generates a dump, let's ignore it too. 17 | erl_crash.dump 18 | 19 | # Also ignore archive artifacts (built via "mix archive.build"). 20 | *.ez 21 | 22 | # Ignore package tarball (built via "mix hex.build"). 23 | phat-*.tar 24 | 25 | # If NPM crashes, it generates a log, let's ignore it too. 26 | npm-debug.log 27 | 28 | # The directory NPM downloads your dependencies sources to. 29 | /assets/node_modules/ 30 | 31 | # Since we are building assets from assets/, 32 | # we ignore priv/static. You may want to comment 33 | # this depending on your deployment strategy. 34 | /priv/static/ 35 | 36 | # Files matching config/*.secret.exs pattern contain sensitive 37 | # data and you should not commit them into version control. 38 | # 39 | # Alternatively, you may comment the line below and commit the 40 | # secrets files as long as you replace their contents by environment 41 | # variables. 42 | /config/*.secret.exs 43 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright 2015 Sean Callan 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Phat 2 | 3 | A chat app that leverages Phoenix LiveView, PubSub and Presence. Learn all about it by [reading this blog post](https://elixirschool.com/blog/live-view-with-presence/). 4 | 5 | To start your Phoenix server: 6 | 7 | - Install dependencies with `mix deps.get` 8 | - Create and migrate your database with `mix ecto.setup` 9 | - Install Node.js dependencies with `cd assets && npm install` 10 | - Start Phoenix endpoint with `mix phx.server` 11 | 12 | Now you can visit `localhost:4000/sessions/new` to log in as one of the user's described in `priv/repo/seeds.exs`. Then click the link to the visit the chat room we created via the database seed. 13 | -------------------------------------------------------------------------------- /assets/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /assets/css/app.css: -------------------------------------------------------------------------------- 1 | /* This file is for your main application css. */ 2 | 3 | @import "./phoenix.css"; 4 | -------------------------------------------------------------------------------- /assets/css/phoenix.css: -------------------------------------------------------------------------------- 1 | /* Includes some default style for the starter application. 2 | * This can be safely deleted to start fresh. 3 | */ 4 | 5 | /* Milligram v1.3.0 https://milligram.github.io 6 | * Copyright (c) 2017 CJ Patoilo Licensed under the MIT license 7 | */ 8 | 9 | *,*:after,*:before{box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%}body{color:#000000;font-family:'Helvetica', 'Arial', sans-serif;font-size:1.6em;font-weight:300;line-height:1.6}blockquote{border-left:0.3rem solid #d1d1d1;margin-left:0;margin-right:0;padding:1rem 1.5rem}blockquote *:last-child{margin-bottom:0}.button,button,input[type='button'],input[type='reset'],input[type='submit']{background-color:#0069d9;border:0.1rem solid #0069d9;border-radius:.4rem;color:#fff;cursor:pointer;display:inline-block;font-size:1.1rem;font-weight:700;height:3.8rem;letter-spacing:.1rem;line-height:3.8rem;padding:0 3.0rem;text-align:center;text-decoration:none;text-transform:uppercase;white-space:nowrap}.button:focus,.button:hover,button:focus,button:hover,input[type='button']:focus,input[type='button']:hover,input[type='reset']:focus,input[type='reset']:hover,input[type='submit']:focus,input[type='submit']:hover{background-color:#606c76;border-color:#606c76;color:#fff;outline:0}.button[disabled],button[disabled],input[type='button'][disabled],input[type='reset'][disabled],input[type='submit'][disabled]{cursor:default;opacity:.5}.button[disabled]:focus,.button[disabled]:hover,button[disabled]:focus,button[disabled]:hover,input[type='button'][disabled]:focus,input[type='button'][disabled]:hover,input[type='reset'][disabled]:focus,input[type='reset'][disabled]:hover,input[type='submit'][disabled]:focus,input[type='submit'][disabled]:hover{background-color:#0069d9;border-color:#0069d9}.button.button-outline,button.button-outline,input[type='button'].button-outline,input[type='reset'].button-outline,input[type='submit'].button-outline{background-color:transparent;color:#0069d9}.button.button-outline:focus,.button.button-outline:hover,button.button-outline:focus,button.button-outline:hover,input[type='button'].button-outline:focus,input[type='button'].button-outline:hover,input[type='reset'].button-outline:focus,input[type='reset'].button-outline:hover,input[type='submit'].button-outline:focus,input[type='submit'].button-outline:hover{background-color:transparent;border-color:#606c76;color:#606c76}.button.button-outline[disabled]:focus,.button.button-outline[disabled]:hover,button.button-outline[disabled]:focus,button.button-outline[disabled]:hover,input[type='button'].button-outline[disabled]:focus,input[type='button'].button-outline[disabled]:hover,input[type='reset'].button-outline[disabled]:focus,input[type='reset'].button-outline[disabled]:hover,input[type='submit'].button-outline[disabled]:focus,input[type='submit'].button-outline[disabled]:hover{border-color:inherit;color:#0069d9}.button.button-clear,button.button-clear,input[type='button'].button-clear,input[type='reset'].button-clear,input[type='submit'].button-clear{background-color:transparent;border-color:transparent;color:#0069d9}.button.button-clear:focus,.button.button-clear:hover,button.button-clear:focus,button.button-clear:hover,input[type='button'].button-clear:focus,input[type='button'].button-clear:hover,input[type='reset'].button-clear:focus,input[type='reset'].button-clear:hover,input[type='submit'].button-clear:focus,input[type='submit'].button-clear:hover{background-color:transparent;border-color:transparent;color:#606c76}.button.button-clear[disabled]:focus,.button.button-clear[disabled]:hover,button.button-clear[disabled]:focus,button.button-clear[disabled]:hover,input[type='button'].button-clear[disabled]:focus,input[type='button'].button-clear[disabled]:hover,input[type='reset'].button-clear[disabled]:focus,input[type='reset'].button-clear[disabled]:hover,input[type='submit'].button-clear[disabled]:focus,input[type='submit'].button-clear[disabled]:hover{color:#0069d9}code{background:#f4f5f6;border-radius:.4rem;font-size:86%;margin:0 .2rem;padding:.2rem .5rem;white-space:nowrap}pre{background:#f4f5f6;border-left:0.3rem solid #0069d9;overflow-y:hidden}pre>code{border-radius:0;display:block;padding:1rem 1.5rem;white-space:pre}hr{border:0;border-top:0.1rem solid #f4f5f6;margin:3.0rem 0}input[type='email'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='url'],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0.1rem solid #d1d1d1;border-radius:.4rem;box-shadow:none;box-sizing:inherit;height:3.8rem;padding:.6rem 1.0rem;width:100%}input[type='email']:focus,input[type='number']:focus,input[type='password']:focus,input[type='search']:focus,input[type='tel']:focus,input[type='text']:focus,input[type='url']:focus,textarea:focus,select:focus{border-color:#0069d9;outline:0}select{background:url('data:image/svg+xml;utf8,') center right no-repeat;padding-right:3.0rem}select:focus{background-image:url('data:image/svg+xml;utf8,')}textarea{min-height:6.5rem}label,legend{display:block;font-size:1.6rem;font-weight:700;margin-bottom:.5rem}fieldset{border-width:0;padding:0}input[type='checkbox'],input[type='radio']{display:inline}.label-inline{display:inline-block;font-weight:normal;margin-left:.5rem}.row{display:flex;flex-direction:column;padding:0;width:100%}.row.row-no-padding{padding:0}.row.row-no-padding>.column{padding:0}.row.row-wrap{flex-wrap:wrap}.row.row-top{align-items:flex-start}.row.row-bottom{align-items:flex-end}.row.row-center{align-items:center}.row.row-stretch{align-items:stretch}.row.row-baseline{align-items:baseline}.row .column{display:block;flex:1 1 auto;margin-left:0;max-width:100%;width:100%}.row .column.column-offset-10{margin-left:10%}.row .column.column-offset-20{margin-left:20%}.row .column.column-offset-25{margin-left:25%}.row .column.column-offset-33,.row .column.column-offset-34{margin-left:33.3333%}.row .column.column-offset-50{margin-left:50%}.row .column.column-offset-66,.row .column.column-offset-67{margin-left:66.6666%}.row .column.column-offset-75{margin-left:75%}.row .column.column-offset-80{margin-left:80%}.row .column.column-offset-90{margin-left:90%}.row .column.column-10{flex:0 0 10%;max-width:10%}.row .column.column-20{flex:0 0 20%;max-width:20%}.row .column.column-25{flex:0 0 25%;max-width:25%}.row .column.column-33,.row .column.column-34{flex:0 0 33.3333%;max-width:33.3333%}.row .column.column-40{flex:0 0 40%;max-width:40%}.row .column.column-50{flex:0 0 50%;max-width:50%}.row .column.column-60{flex:0 0 60%;max-width:60%}.row .column.column-66,.row .column.column-67{flex:0 0 66.6666%;max-width:66.6666%}.row .column.column-75{flex:0 0 75%;max-width:75%}.row .column.column-80{flex:0 0 80%;max-width:80%}.row .column.column-90{flex:0 0 90%;max-width:90%}.row .column .column-top{align-self:flex-start}.row .column .column-bottom{align-self:flex-end}.row .column .column-center{-ms-grid-row-align:center;align-self:center}@media (min-width: 40rem){.row{flex-direction:row;margin-left:-1.0rem;width:calc(100% + 2.0rem)}.row .column{margin-bottom:inherit;padding:0 1.0rem}}a{color:#0069d9;text-decoration:none}a:focus,a:hover{color:#606c76}dl,ol,ul{list-style:none;margin-top:0;padding-left:0}dl dl,dl ol,dl ul,ol dl,ol ol,ol ul,ul dl,ul ol,ul ul{font-size:90%;margin:1.5rem 0 1.5rem 3.0rem}ol{list-style:decimal inside}ul{list-style:circle inside}.button,button,dd,dt,li{margin-bottom:1.0rem}fieldset,input,select,textarea{margin-bottom:1.5rem}blockquote,dl,figure,form,ol,p,pre,table,ul{margin-bottom:2.5rem}table{border-spacing:0;width:100%}td,th{border-bottom:0.1rem solid #e1e1e1;padding:1.2rem 1.5rem;text-align:left}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}b,strong{font-weight:bold}p{margin-top:0}h1,h2,h3,h4,h5,h6{font-weight:300;letter-spacing:-.1rem;margin-bottom:2.0rem;margin-top:0}h1{font-size:4.6rem;line-height:1.2}h2{font-size:3.6rem;line-height:1.25}h3{font-size:2.8rem;line-height:1.3}h4{font-size:2.2rem;letter-spacing:-.08rem;line-height:1.35}h5{font-size:1.8rem;letter-spacing:-.05rem;line-height:1.5}h6{font-size:1.6rem;letter-spacing:0;line-height:1.4}img{max-width:100%}.clearfix:after{clear:both;content:' ';display:table}.float-left{float:left}.float-right{float:right} 10 | 11 | /* General style */ 12 | h1{font-size: 3.6rem; line-height: 1.25} 13 | h2{font-size: 2.8rem; line-height: 1.3} 14 | h3{font-size: 2.2rem; letter-spacing: -.08rem; line-height: 1.35} 15 | h4{font-size: 1.8rem; letter-spacing: -.05rem; line-height: 1.5} 16 | h5{font-size: 1.6rem; letter-spacing: 0; line-height: 1.4} 17 | h6{font-size: 1.4rem; letter-spacing: 0; line-height: 1.2} 18 | 19 | .container{ 20 | margin: 0 auto; 21 | max-width: 80.0rem; 22 | padding: 0 2.0rem; 23 | position: relative; 24 | width: 100% 25 | } 26 | select { 27 | width: auto; 28 | } 29 | 30 | /* Alerts and form errors */ 31 | .alert { 32 | padding: 15px; 33 | margin-bottom: 20px; 34 | border: 1px solid transparent; 35 | border-radius: 4px; 36 | } 37 | .alert-info { 38 | color: #31708f; 39 | background-color: #d9edf7; 40 | border-color: #bce8f1; 41 | } 42 | .alert-warning { 43 | color: #8a6d3b; 44 | background-color: #fcf8e3; 45 | border-color: #faebcc; 46 | } 47 | .alert-danger { 48 | color: #a94442; 49 | background-color: #f2dede; 50 | border-color: #ebccd1; 51 | } 52 | .alert p { 53 | margin-bottom: 0; 54 | } 55 | .alert:empty { 56 | display: none; 57 | } 58 | .help-block { 59 | color: #a94442; 60 | display: block; 61 | margin: -1rem 0 2rem; 62 | } 63 | 64 | /* Phoenix promo and logo */ 65 | .phx-hero { 66 | text-align: center; 67 | border-bottom: 1px solid #e3e3e3; 68 | background: #eee; 69 | border-radius: 6px; 70 | padding: 3em; 71 | margin-bottom: 3rem; 72 | font-weight: 200; 73 | font-size: 120%; 74 | } 75 | .phx-hero p { 76 | margin: 0; 77 | } 78 | .phx-logo { 79 | min-width: 300px; 80 | margin: 1rem; 81 | display: block; 82 | } 83 | .phx-logo img { 84 | width: auto; 85 | display: block; 86 | } 87 | 88 | /* Headers */ 89 | header { 90 | width: 100%; 91 | background: #fdfdfd; 92 | border-bottom: 1px solid #eaeaea; 93 | margin-bottom: 2rem; 94 | } 95 | header section { 96 | align-items: center; 97 | display: flex; 98 | flex-direction: column; 99 | justify-content: space-between; 100 | } 101 | header section :first-child { 102 | order: 2; 103 | } 104 | header section :last-child { 105 | order: 1; 106 | } 107 | header nav ul, 108 | header nav li { 109 | margin: 0; 110 | padding: 0; 111 | display: inline-block; 112 | text-align: right; 113 | white-space: nowrap; 114 | } 115 | header nav ul { 116 | margin: 1rem; 117 | margin-top: 0; 118 | } 119 | header nav a { 120 | display: inline-block; 121 | } 122 | 123 | .messages { 124 | height: 350px; 125 | overflow: scroll; 126 | } 127 | 128 | .chatroom { 129 | width: 900px; 130 | } 131 | 132 | .chat-content { 133 | display: inline-block; 134 | width: 600px; 135 | } 136 | 137 | .members { 138 | display: inline-block; 139 | float: right; 140 | width: 200px; 141 | } 142 | 143 | 144 | 145 | @media (min-width: 40.0rem) { /* Small devices (landscape phones, 576px and up) */ 146 | header section { 147 | flex-direction: row; 148 | } 149 | header nav ul { 150 | margin: 1rem; 151 | } 152 | .phx-logo { 153 | flex-basis: 527px; 154 | margin: 2rem 1rem; 155 | } 156 | } 157 | -------------------------------------------------------------------------------- /assets/js/app.js: -------------------------------------------------------------------------------- 1 | // We need to import the CSS so that webpack will load it. 2 | // The MiniCssExtractPlugin is used to separate it out into 3 | // its own CSS file. 4 | import css from "../css/app.css" 5 | 6 | // webpack automatically bundles all modules in your 7 | // entry points. Those entry points can be configured 8 | // in "webpack.config.js". 9 | // 10 | // Import dependencies 11 | // 12 | import "phoenix_html" 13 | 14 | import LiveSocket from "phoenix_live_view" 15 | 16 | let liveSocket = new LiveSocket("/live") 17 | liveSocket.connect() 18 | 19 | // Select the node that will be observed for mutations 20 | const targetNode = document.getElementsByClassName("messages")[0] 21 | 22 | document.addEventListener("DOMContentLoaded", function() { 23 | targetNode.scrollTop = targetNode.scrollHeight 24 | }); 25 | // Options for the observer (which mutations to observe) 26 | let config = { attributes: true, childList: true, subtree: true }; 27 | // Callback function to execute when mutations are observed 28 | var callback = function(mutationsList, observer) { 29 | for(var mutation of mutationsList) { 30 | if (mutation.type == 'childList') { 31 | targetNode.scrollTop = targetNode.scrollHeight 32 | } 33 | } 34 | }; 35 | // Create an observer instance linked to the callback function 36 | var observer = new MutationObserver(callback); 37 | // Start observing the target node for configured mutations 38 | observer.observe(targetNode, config); 39 | 40 | // Import local files 41 | // 42 | // Local files can be imported directly using relative paths, for example: 43 | // import socket from "./socket" 44 | -------------------------------------------------------------------------------- /assets/js/socket.js: -------------------------------------------------------------------------------- 1 | // NOTE: The contents of this file will only be executed if 2 | // you uncomment its entry in "assets/js/app.js". 3 | 4 | // To use Phoenix channels, the first step is to import Socket, 5 | // and connect at the socket path in "lib/web/endpoint.ex". 6 | // 7 | // Pass the token on params as below. Or remove it 8 | // from the params if you are not using authentication. 9 | import {Socket} from "phoenix" 10 | 11 | let socket = new Socket("/socket", {params: {token: window.userToken}}) 12 | 13 | // When you connect, you'll often need to authenticate the client. 14 | // For example, imagine you have an authentication plug, `MyAuth`, 15 | // which authenticates the session and assigns a `:current_user`. 16 | // If the current user exists you can assign the user's token in 17 | // the connection for use in the layout. 18 | // 19 | // In your "lib/web/router.ex": 20 | // 21 | // pipeline :browser do 22 | // ... 23 | // plug MyAuth 24 | // plug :put_user_token 25 | // end 26 | // 27 | // defp put_user_token(conn, _) do 28 | // if current_user = conn.assigns[:current_user] do 29 | // token = Phoenix.Token.sign(conn, "user socket", current_user.id) 30 | // assign(conn, :user_token, token) 31 | // else 32 | // conn 33 | // end 34 | // end 35 | // 36 | // Now you need to pass this token to JavaScript. You can do so 37 | // inside a script tag in "lib/web/templates/layout/app.html.eex": 38 | // 39 | // 40 | // 41 | // You will need to verify the user token in the "connect/3" function 42 | // in "lib/web/channels/user_socket.ex": 43 | // 44 | // def connect(%{"token" => token}, socket, _connect_info) do 45 | // # max_age: 1209600 is equivalent to two weeks in seconds 46 | // case Phoenix.Token.verify(socket, "user socket", token, max_age: 1209600) do 47 | // {:ok, user_id} -> 48 | // {:ok, assign(socket, :user, user_id)} 49 | // {:error, reason} -> 50 | // :error 51 | // end 52 | // end 53 | // 54 | // Finally, connect to the socket: 55 | socket.connect() 56 | 57 | // Now that you are connected, you can join channels with a topic: 58 | let channel = socket.channel("topic:subtopic", {}) 59 | channel.join() 60 | .receive("ok", resp => { console.log("Joined successfully", resp) }) 61 | .receive("error", resp => { console.log("Unable to join", resp) }) 62 | 63 | export default socket 64 | -------------------------------------------------------------------------------- /assets/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "repository": {}, 3 | "license": "MIT", 4 | "scripts": { 5 | "deploy": "webpack --mode production", 6 | "watch": "webpack --mode development --watch" 7 | }, 8 | "dependencies": { 9 | "phoenix": "file:../deps/phoenix", 10 | "phoenix_html": "file:../deps/phoenix_html", 11 | "phoenix_live_view": "file:../deps/phoenix_live_view" 12 | }, 13 | "devDependencies": { 14 | "@babel/core": "^7.0.0", 15 | "@babel/preset-env": "^7.0.0", 16 | "babel-loader": "^8.0.0", 17 | "copy-webpack-plugin": "^4.5.0", 18 | "css-loader": "^2.1.1", 19 | "mini-css-extract-plugin": "^0.4.0", 20 | "optimize-css-assets-webpack-plugin": "^4.0.0", 21 | "uglifyjs-webpack-plugin": "^1.2.4", 22 | "webpack": "4.4.0", 23 | "webpack-cli": "^2.0.10" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /assets/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elixirschool/live-view-chat/21560bf6bc68073c156b441863125085e94c5240/assets/static/favicon.ico -------------------------------------------------------------------------------- /assets/static/images/phoenix.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/elixirschool/live-view-chat/21560bf6bc68073c156b441863125085e94c5240/assets/static/images/phoenix.png -------------------------------------------------------------------------------- /assets/static/robots.txt: -------------------------------------------------------------------------------- 1 | # See http://www.robotstxt.org/robotstxt.html for documentation on how to use the robots.txt file 2 | # 3 | # To ban all spiders from the entire site uncomment the next two lines: 4 | # User-agent: * 5 | # Disallow: / 6 | -------------------------------------------------------------------------------- /assets/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const glob = require('glob'); 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 4 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); 5 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 6 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 7 | 8 | module.exports = (env, options) => ({ 9 | optimization: { 10 | minimizer: [ 11 | new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }), 12 | new OptimizeCSSAssetsPlugin({}) 13 | ] 14 | }, 15 | entry: { 16 | './js/app.js': ['./js/app.js'].concat(glob.sync('./vendor/**/*.js')) 17 | }, 18 | output: { 19 | filename: 'app.js', 20 | path: path.resolve(__dirname, '../priv/static/js') 21 | }, 22 | module: { 23 | rules: [ 24 | { 25 | test: /\.js$/, 26 | exclude: /node_modules/, 27 | use: { 28 | loader: 'babel-loader' 29 | } 30 | }, 31 | { 32 | test: /\.css$/, 33 | use: [MiniCssExtractPlugin.loader, 'css-loader'] 34 | } 35 | ] 36 | }, 37 | plugins: [ 38 | new MiniCssExtractPlugin({ filename: '../css/app.css' }), 39 | new CopyWebpackPlugin([{ from: 'static/', to: '../' }]) 40 | ] 41 | }); 42 | -------------------------------------------------------------------------------- /config/config.exs: -------------------------------------------------------------------------------- 1 | # This file is responsible for configuring your application 2 | # and its dependencies with the aid of the Mix.Config module. 3 | # 4 | # This configuration file is loaded before any dependency and 5 | # is restricted to this project. 6 | 7 | # General application configuration 8 | use Mix.Config 9 | 10 | config :phat, 11 | ecto_repos: [Phat.Repo] 12 | 13 | # Configures the endpoint 14 | config :phat, PhatWeb.Endpoint, 15 | url: [host: "localhost"], 16 | secret_key_base: "YsCaRB0LDVBAErKSsCeFV+mHfxbbzGhOBVVW+IkBYKXIfYA7enKk/rmsiTKodxqL", 17 | render_errors: [view: PhatWeb.ErrorView, accepts: ~w(html json)], 18 | pubsub: [name: Phat.PubSub, adapter: Phoenix.PubSub.PG2], 19 | live_view: [ 20 | signing_salt: "EWF2aYSGeG6xS7W4taCCOO070F4oe4cnVG4x4t+fIZC5cRISMnwK3vdFeG5tFBbb" 21 | ] 22 | 23 | # Configures Elixir's Logger 24 | config :logger, :console, 25 | format: "$time $metadata[$level] $message\n", 26 | metadata: [:request_id] 27 | 28 | # Use Jason for JSON parsing in Phoenix 29 | config :phoenix, :json_library, Jason 30 | 31 | config :phoenix, 32 | template_engines: [leex: Phoenix.LiveView.Engine] 33 | 34 | # Import environment specific config. This must remain at the bottom 35 | # of this file so it overrides the configuration defined above. 36 | import_config "#{Mix.env()}.exs" 37 | -------------------------------------------------------------------------------- /config/dev.exs: -------------------------------------------------------------------------------- 1 | use Mix.Config 2 | 3 | # For development, we disable any cache and enable 4 | # debugging and code reloading. 5 | # 6 | # The watchers configuration can be used to run external 7 | # watchers to your application. For example, we use it 8 | # with webpack to recompile .js and .css sources. 9 | config :phat, PhatWeb.Endpoint, 10 | http: [port: 4000], 11 | debug_errors: true, 12 | code_reloader: true, 13 | check_origin: false, 14 | watchers: [ 15 | node: [ 16 | "node_modules/webpack/bin/webpack.js", 17 | "--mode", 18 | "development", 19 | "--watch-stdin", 20 | cd: Path.expand("../assets", __DIR__) 21 | ] 22 | ] 23 | 24 | # ## SSL Support 25 | # 26 | # In order to use HTTPS in development, a self-signed 27 | # certificate can be generated by running the following 28 | # Mix task: 29 | # 30 | # mix phx.gen.cert 31 | # 32 | # Note that this task requires Erlang/OTP 20 or later. 33 | # Run `mix help phx.gen.cert` for more information. 34 | # 35 | # The `http:` config above can be replaced with: 36 | # 37 | # https: [ 38 | # port: 4001, 39 | # cipher_suite: :strong, 40 | # keyfile: "priv/cert/selfsigned_key.pem", 41 | # certfile: "priv/cert/selfsigned.pem" 42 | # ], 43 | # 44 | # If desired, both `http:` and `https:` keys can be 45 | # configured to run both http and https servers on 46 | # different ports. 47 | 48 | # Watch static and templates for browser reloading. 49 | config :phat, PhatWeb.Endpoint, 50 | live_reload: [ 51 | patterns: [ 52 | ~r{priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$}, 53 | ~r{priv/gettext/.*(po)$}, 54 | ~r{lib/phat_web/views/.*(ex)$}, 55 | ~r{lib/phat_web/templates/.*(eex)$}, 56 | ~r{lib/phat_web/live/.*(ex)$} 57 | ] 58 | ] 59 | 60 | # Do not include metadata nor timestamps in development logs 61 | config :logger, :console, format: "[$level] $message\n" 62 | 63 | # Set a higher stacktrace during development. Avoid configuring such 64 | # in production as building large stacktraces may be expensive. 65 | config :phoenix, :stacktrace_depth, 20 66 | 67 | # Initialize plugs at runtime for faster development compilation 68 | config :phoenix, :plug_init_mode, :runtime 69 | 70 | # Configure your database 71 | config :phat, Phat.Repo, 72 | username: "postgres", 73 | password: "postgres", 74 | database: "phat_dev", 75 | hostname: "localhost", 76 | pool_size: 10 77 | -------------------------------------------------------------------------------- /config/prod.exs: -------------------------------------------------------------------------------- 1 | use Mix.Config 2 | 3 | # For production, don't forget to configure the url host 4 | # to something meaningful, Phoenix uses this information 5 | # when generating URLs. 6 | # 7 | # Note we also include the path to a cache manifest 8 | # containing the digested version of static files. This 9 | # manifest is generated by the `mix phx.digest` task, 10 | # which you should run after static files are built and 11 | # before starting your production server. 12 | config :phat, PhatWeb.Endpoint, 13 | http: [:inet6, port: System.get_env("PORT") || 4000], 14 | url: [host: "example.com", port: 80], 15 | cache_static_manifest: "priv/static/cache_manifest.json" 16 | 17 | # Do not print debug messages in production 18 | config :logger, level: :info 19 | 20 | # ## SSL Support 21 | # 22 | # To get SSL working, you will need to add the `https` key 23 | # to the previous section and set your `:url` port to 443: 24 | # 25 | # config :phat, PhatWeb.Endpoint, 26 | # ... 27 | # url: [host: "example.com", port: 443], 28 | # https: [ 29 | # :inet6, 30 | # port: 443, 31 | # cipher_suite: :strong, 32 | # keyfile: System.get_env("SOME_APP_SSL_KEY_PATH"), 33 | # certfile: System.get_env("SOME_APP_SSL_CERT_PATH") 34 | # ] 35 | # 36 | # The `cipher_suite` is set to `:strong` to support only the 37 | # latest and more secure SSL ciphers. This means old browsers 38 | # and clients may not be supported. You can set it to 39 | # `:compatible` for wider support. 40 | # 41 | # `:keyfile` and `:certfile` expect an absolute path to the key 42 | # and cert in disk or a relative path inside priv, for example 43 | # "priv/ssl/server.key". For all supported SSL configuration 44 | # options, see https://hexdocs.pm/plug/Plug.SSL.html#configure/1 45 | # 46 | # We also recommend setting `force_ssl` in your endpoint, ensuring 47 | # no data is ever sent via http, always redirecting to https: 48 | # 49 | # config :phat, PhatWeb.Endpoint, 50 | # force_ssl: [hsts: true] 51 | # 52 | # Check `Plug.SSL` for all available options in `force_ssl`. 53 | 54 | # ## Using releases (distillery) 55 | # 56 | # If you are doing OTP releases, you need to instruct Phoenix 57 | # to start the server for all endpoints: 58 | # 59 | # config :phoenix, :serve_endpoints, true 60 | # 61 | # Alternatively, you can configure exactly which server to 62 | # start per endpoint: 63 | # 64 | # config :phat, PhatWeb.Endpoint, server: true 65 | # 66 | # Note you can't rely on `System.get_env/1` when using releases. 67 | # See the releases documentation accordingly. 68 | 69 | # Finally import the config/prod.secret.exs which should be versioned 70 | # separately. 71 | import_config "prod.secret.exs" 72 | -------------------------------------------------------------------------------- /config/test.exs: -------------------------------------------------------------------------------- 1 | use Mix.Config 2 | 3 | # We don't run a server during test. If one is required, 4 | # you can enable the server option below. 5 | config :phat, PhatWeb.Endpoint, 6 | http: [port: 4002], 7 | server: false 8 | 9 | # Print only warnings and errors during test 10 | config :logger, level: :warn 11 | 12 | # Configure your database 13 | config :phat, Phat.Repo, 14 | username: "postgres", 15 | password: "postgres", 16 | database: "phat_test", 17 | hostname: "localhost", 18 | pool: Ecto.Adapters.SQL.Sandbox 19 | -------------------------------------------------------------------------------- /lib/phat.ex: -------------------------------------------------------------------------------- 1 | defmodule Phat do 2 | @moduledoc """ 3 | Phat keeps the contexts that define your domain 4 | and business logic. 5 | 6 | Contexts are also responsible for managing your data, regardless 7 | if it comes from the database, an external API or others. 8 | """ 9 | end 10 | -------------------------------------------------------------------------------- /lib/phat/accounts.ex: -------------------------------------------------------------------------------- 1 | defmodule Phat.Accounts do 2 | alias Phat.Repo 3 | alias Phat.Accounts.User 4 | 5 | def change_user(changeset) do 6 | User.changeset(changeset) 7 | end 8 | 9 | def list_users do 10 | Repo.all(User) 11 | end 12 | 13 | def create_user(user_params) do 14 | User.changeset(%User{}, user_params) 15 | |> Repo.insert() 16 | end 17 | 18 | def get_user(user_id) do 19 | Repo.get(User, user_id) 20 | end 21 | end 22 | -------------------------------------------------------------------------------- /lib/phat/accounts/user.ex: -------------------------------------------------------------------------------- 1 | defmodule Phat.Accounts.User do 2 | use Ecto.Schema 3 | import Ecto.Changeset 4 | alias Phat.User 5 | 6 | schema "users" do 7 | field :first_name, :string 8 | field :last_name, :string 9 | field :email, :string 10 | field :password, :string, virtual: true 11 | field :encrypted_password, :string 12 | 13 | timestamps() 14 | end 15 | 16 | @doc false 17 | def changeset(struct, params \\ %{}) do 18 | struct 19 | |> cast(params, [:first_name, :last_name, :email, :password]) 20 | |> validate_required([:first_name, :last_name, :email]) 21 | |> unique_constraint(:email, message: "Email has already been taken") 22 | |> generate_encrypted_password 23 | end 24 | 25 | defp generate_encrypted_password(changeset) do 26 | case changeset do 27 | %Ecto.Changeset{valid?: true, changes: %{password: password}} -> 28 | put_change(changeset, :encrypted_password, Comeonin.Bcrypt.hashpwsalt(password)) 29 | 30 | _ -> 31 | changeset 32 | end 33 | end 34 | end 35 | -------------------------------------------------------------------------------- /lib/phat/application.ex: -------------------------------------------------------------------------------- 1 | defmodule Phat.Application do 2 | # See https://hexdocs.pm/elixir/Application.html 3 | # for more information on OTP Applications 4 | @moduledoc false 5 | 6 | use Application 7 | 8 | def start(_type, _args) do 9 | # List all child processes to be supervised 10 | children = [ 11 | # Start the Ecto repository 12 | Phat.Repo, 13 | # Start the endpoint when the application starts 14 | PhatWeb.Endpoint, 15 | PhatWeb.Presence 16 | # Starts a worker by calling: Phat.Worker.start_link(arg) 17 | # {Phat.Worker, arg}, 18 | ] 19 | 20 | # See https://hexdocs.pm/elixir/Supervisor.html 21 | # for other strategies and supported options 22 | opts = [strategy: :one_for_one, name: Phat.Supervisor] 23 | Supervisor.start_link(children, opts) 24 | end 25 | 26 | # Tell Phoenix to update the endpoint configuration 27 | # whenever the application is updated. 28 | def config_change(changed, _new, removed) do 29 | PhatWeb.Endpoint.config_change(changed, removed) 30 | :ok 31 | end 32 | end 33 | -------------------------------------------------------------------------------- /lib/phat/chats.ex: -------------------------------------------------------------------------------- 1 | defmodule Phat.Chats do 2 | alias Phat.Repo 3 | alias Phat.Chats.Chat 4 | alias Phat.Chats.Message 5 | import Ecto.Query 6 | 7 | def create_chat(chat_params) do 8 | Chat.changeset(%Chat{}, chat_params) 9 | |> Repo.insert() 10 | end 11 | 12 | def create_message(message_params) do 13 | Message.changeset(%Message{}, message_params) 14 | |> Repo.insert!() 15 | 16 | Phat.Chats.get_chat(message_params["chat_id"]) 17 | end 18 | 19 | def change_message do 20 | Message.changeset(%Message{}) 21 | end 22 | 23 | def change_message(changeset, changes) do 24 | Message.changeset(changeset, changes) 25 | end 26 | 27 | def list_chats do 28 | Repo.all(Chat) 29 | end 30 | 31 | def get_chat(chat_id) do 32 | query = 33 | from c in Chat, 34 | where: c.id == ^chat_id, 35 | preload: [messages: :user] 36 | 37 | Repo.one(query) 38 | end 39 | end 40 | -------------------------------------------------------------------------------- /lib/phat/chats/chat.ex: -------------------------------------------------------------------------------- 1 | defmodule Phat.Chats.Chat do 2 | use Ecto.Schema 3 | import Ecto.Changeset 4 | alias Phat.Chats.Message 5 | 6 | schema "chats" do 7 | has_many :messages, Message 8 | field :room_name, :string 9 | timestamps() 10 | end 11 | 12 | @doc """ 13 | Builds a changeset based on the `struct` and `params`. 14 | """ 15 | def changeset(struct, params \\ %{}) do 16 | struct 17 | |> cast(params, [:room_name]) 18 | |> validate_required([:room_name]) 19 | end 20 | end 21 | -------------------------------------------------------------------------------- /lib/phat/chats/message.ex: -------------------------------------------------------------------------------- 1 | defmodule Phat.Chats.Message do 2 | use Ecto.Schema 3 | import Ecto.Changeset 4 | alias Phat.Chats.Chat 5 | alias Phat.Accounts.User 6 | 7 | schema "messages" do 8 | belongs_to :chat, Chat 9 | belongs_to :user, User 10 | field :content, :string 11 | 12 | timestamps() 13 | end 14 | 15 | @doc false 16 | def changeset(struct, params \\ %{}) do 17 | struct 18 | |> cast(params, [:chat_id, :content, :user_id]) 19 | |> validate_required([:chat_id, :content, :user_id]) 20 | end 21 | end 22 | -------------------------------------------------------------------------------- /lib/phat/repo.ex: -------------------------------------------------------------------------------- 1 | defmodule Phat.Repo do 2 | use Ecto.Repo, 3 | otp_app: :phat, 4 | adapter: Ecto.Adapters.Postgres 5 | end 6 | -------------------------------------------------------------------------------- /lib/phat_web.ex: -------------------------------------------------------------------------------- 1 | defmodule PhatWeb do 2 | @moduledoc """ 3 | The entrypoint for defining your web interface, such 4 | as controllers, views, channels and so on. 5 | 6 | This can be used in your application as: 7 | 8 | use PhatWeb, :controller 9 | use PhatWeb, :view 10 | 11 | The definitions below will be executed for every view, 12 | controller, etc, so keep them short and clean, focused 13 | on imports, uses and aliases. 14 | 15 | Do NOT define functions inside the quoted expressions 16 | below. Instead, define any helper function in modules 17 | and import those modules here. 18 | """ 19 | 20 | def controller do 21 | quote do 22 | use Phoenix.Controller, namespace: PhatWeb 23 | 24 | import Plug.Conn 25 | import PhatWeb.Gettext 26 | alias PhatWeb.Router.Helpers, as: Routes 27 | end 28 | end 29 | 30 | def view do 31 | quote do 32 | use Phoenix.View, 33 | root: "lib/phat_web/templates", 34 | namespace: PhatWeb 35 | 36 | # Import convenience functions from controllers 37 | import Phoenix.Controller, only: [get_flash: 1, get_flash: 2, view_module: 1] 38 | 39 | # Use all HTML functionality (forms, tags, etc) 40 | use Phoenix.HTML 41 | 42 | import PhatWeb.ErrorHelpers 43 | import PhatWeb.Gettext 44 | alias PhatWeb.Router.Helpers, as: Routes 45 | import Phoenix.LiveView, only: [live_render: 2, live_render: 3] 46 | end 47 | end 48 | 49 | def router do 50 | quote do 51 | use Phoenix.Router 52 | import Plug.Conn 53 | import Phoenix.Controller 54 | import Phoenix.LiveView.Router 55 | end 56 | end 57 | 58 | def channel do 59 | quote do 60 | use Phoenix.Channel 61 | import PhatWeb.Gettext 62 | end 63 | end 64 | 65 | @doc """ 66 | When used, dispatch to the appropriate controller/view/etc. 67 | """ 68 | defmacro __using__(which) when is_atom(which) do 69 | apply(__MODULE__, which, []) 70 | end 71 | end 72 | -------------------------------------------------------------------------------- /lib/phat_web/channels/user_socket.ex: -------------------------------------------------------------------------------- 1 | defmodule PhatWeb.UserSocket do 2 | use Phoenix.Socket 3 | 4 | ## Channels 5 | # channel "room:*", PhatWeb.RoomChannel 6 | 7 | # Socket params are passed from the client and can 8 | # be used to verify and authenticate a user. After 9 | # verification, you can put default assigns into 10 | # the socket that will be set for all channels, ie 11 | # 12 | # {:ok, assign(socket, :user_id, verified_user_id)} 13 | # 14 | # To deny connection, return `:error`. 15 | # 16 | # See `Phoenix.Token` documentation for examples in 17 | # performing token verification on connect. 18 | def connect(_params, socket, _connect_info) do 19 | {:ok, socket} 20 | end 21 | 22 | # Socket id's are topics that allow you to identify all sockets for a given user: 23 | # 24 | # def id(socket), do: "user_socket:#{socket.assigns.user_id}" 25 | # 26 | # Would allow you to broadcast a "disconnect" event and terminate 27 | # all active sockets and channels for a given user: 28 | # 29 | # PhatWeb.Endpoint.broadcast("user_socket:#{user.id}", "disconnect", %{}) 30 | # 31 | # Returning `nil` makes this socket anonymous. 32 | def id(_socket), do: nil 33 | end 34 | -------------------------------------------------------------------------------- /lib/phat_web/controllers/chat_controller.ex: -------------------------------------------------------------------------------- 1 | defmodule PhatWeb.ChatController do 2 | use PhatWeb, :controller 3 | alias Phat.Chats 4 | alias Phoenix.LiveView 5 | alias PhatWeb.ChatLiveView 6 | plug :authenticate_user 7 | 8 | def index(conn, _params) do 9 | chats = Chats.list_chats() 10 | render(conn, "index.html", chats: chats) 11 | end 12 | 13 | def show(conn, %{"id" => chat_id}) do 14 | chat = Chats.get_chat(chat_id) 15 | 16 | LiveView.Controller.live_render( 17 | conn, 18 | ChatLiveView, 19 | session: %{chat: chat, current_user: conn.assigns.current_user} 20 | ) 21 | end 22 | 23 | defp authenticate_user(conn, _) do 24 | case get_session(conn, :user_id) do 25 | nil -> 26 | conn 27 | |> Phoenix.Controller.put_flash(:error, "Login required") 28 | |> Phoenix.Controller.redirect(to: "/sessions/new") 29 | |> halt() 30 | 31 | user_id -> 32 | assign(conn, :current_user, Phat.Accounts.get_user(user_id)) 33 | end 34 | end 35 | end 36 | -------------------------------------------------------------------------------- /lib/phat_web/controllers/page_controller.ex: -------------------------------------------------------------------------------- 1 | defmodule PhatWeb.PageController do 2 | use PhatWeb, :controller 3 | 4 | def index(conn, _params) do 5 | render(conn, "index.html") 6 | end 7 | end 8 | -------------------------------------------------------------------------------- /lib/phat_web/controllers/session_controller.ex: -------------------------------------------------------------------------------- 1 | defmodule PhatWeb.SessionController do 2 | use PhatWeb, :controller 3 | alias PhatWeb.Services.Session 4 | 5 | def new(conn, _) do 6 | render(conn, "new.html") 7 | end 8 | 9 | def create(conn, %{"user" => user_params}) do 10 | case Session.authenticate(user_params) do 11 | {:ok, user} -> 12 | conn 13 | |> put_flash(:info, "Welcome back!") 14 | |> put_session(:user_id, user.id) 15 | |> configure_session(renew: true) 16 | |> redirect(to: "/chats") 17 | 18 | :error -> 19 | conn 20 | |> put_flash(:error, "Bad email/password combination") 21 | |> redirect(to: Routes.session_path(conn, :new)) 22 | end 23 | end 24 | 25 | def delete(conn, _) do 26 | conn 27 | |> configure_session(drop: true) 28 | |> redirect(to: "/sessions/new") 29 | end 30 | end 31 | -------------------------------------------------------------------------------- /lib/phat_web/controllers/user_controller.ex: -------------------------------------------------------------------------------- 1 | defmodule PhatWeb.UserController do 2 | use PhatWeb, :controller 3 | 4 | alias Phat.Accounts 5 | alias Phat.Accounts.User 6 | 7 | def index(conn, _params) do 8 | users = Accounts.list_users() 9 | render(conn, "index.html", users: users) 10 | end 11 | 12 | def show(conn, %{"id" => user_id}) do 13 | user = Accounts.get_user(user_id) 14 | render(conn, "show.html", user: user) 15 | end 16 | 17 | def new(conn, _params) do 18 | changeset = Accounts.change_user(%User{}) 19 | render(conn, "new.html", changeset: changeset) 20 | end 21 | 22 | def create(conn, %{"user" => user_params}) do 23 | case Accounts.create_user(user_params) do 24 | {:ok, user} -> 25 | conn 26 | |> put_session(:user_id, user.id) 27 | |> configure_session(renew: true) 28 | |> put_flash(:info, "User created successfully.") 29 | |> redirect(to: Routes.user_path(conn, :show, user)) 30 | 31 | {:error, %Ecto.Changeset{} = changeset} -> 32 | render(conn, "new.html", changeset: changeset) 33 | end 34 | end 35 | end 36 | -------------------------------------------------------------------------------- /lib/phat_web/endpoint.ex: -------------------------------------------------------------------------------- 1 | defmodule PhatWeb.Endpoint do 2 | use Phoenix.Endpoint, otp_app: :phat 3 | 4 | socket "/socket", PhatWeb.UserSocket, 5 | websocket: true, 6 | longpoll: false 7 | 8 | socket "/live", Phoenix.LiveView.Socket 9 | 10 | # Serve at "/" the static files from "priv/static" directory. 11 | # 12 | # You should set gzip to true if you are running phx.digest 13 | # when deploying your static files in production. 14 | plug Plug.Static, 15 | at: "/", 16 | from: :phat, 17 | gzip: false, 18 | only: ~w(css fonts images js favicon.ico robots.txt) 19 | 20 | # Code reloading can be explicitly enabled under the 21 | # :code_reloader configuration of your endpoint. 22 | if code_reloading? do 23 | socket "/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket 24 | plug Phoenix.LiveReloader 25 | plug Phoenix.CodeReloader 26 | end 27 | 28 | plug Plug.RequestId 29 | plug Plug.Logger 30 | 31 | plug Plug.Parsers, 32 | parsers: [:urlencoded, :multipart, :json], 33 | pass: ["*/*"], 34 | json_decoder: Phoenix.json_library() 35 | 36 | plug Plug.MethodOverride 37 | plug Plug.Head 38 | 39 | # The session will be stored in the cookie and signed, 40 | # this means its contents can be read but not tampered with. 41 | # Set :encryption_salt if you would also like to encrypt it. 42 | plug Plug.Session, 43 | store: :cookie, 44 | key: "_phat_key", 45 | signing_salt: "ZcdwU2CN" 46 | 47 | plug PhatWeb.Router 48 | end 49 | -------------------------------------------------------------------------------- /lib/phat_web/gettext.ex: -------------------------------------------------------------------------------- 1 | defmodule PhatWeb.Gettext do 2 | @moduledoc """ 3 | A module providing Internationalization with a gettext-based API. 4 | 5 | By using [Gettext](https://hexdocs.pm/gettext), 6 | your module gains a set of macros for translations, for example: 7 | 8 | import PhatWeb.Gettext 9 | 10 | # Simple translation 11 | gettext("Here is the string to translate") 12 | 13 | # Plural translation 14 | ngettext("Here is the string to translate", 15 | "Here are the strings to translate", 16 | 3) 17 | 18 | # Domain-based translation 19 | dgettext("errors", "Here is the error message to translate") 20 | 21 | See the [Gettext Docs](https://hexdocs.pm/gettext) for detailed usage. 22 | """ 23 | use Gettext, otp_app: :phat 24 | end 25 | -------------------------------------------------------------------------------- /lib/phat_web/live/chat_live_view.ex: -------------------------------------------------------------------------------- 1 | defmodule PhatWeb.ChatLiveView do 2 | use Phoenix.LiveView 3 | alias Phat.Chats 4 | alias PhatWeb.Presence 5 | 6 | defp topic(chat_id), do: "chat:#{chat_id}" 7 | 8 | def render(assigns) do 9 | PhatWeb.ChatView.render("show.html", assigns) 10 | end 11 | 12 | def mount(%{chat: chat, current_user: current_user}, socket) do 13 | Presence.track_presence( 14 | self(), 15 | topic(chat.id), 16 | current_user.id, 17 | default_user_presence_payload(current_user) 18 | ) 19 | 20 | PhatWeb.Endpoint.subscribe(topic(chat.id)) 21 | 22 | {:ok, 23 | assign(socket, 24 | chat: chat, 25 | message: Chats.change_message(), 26 | current_user: current_user, 27 | users: Presence.list_presences(topic(chat.id)), 28 | username_colors: username_colors(chat) 29 | )} 30 | end 31 | 32 | def handle_info(%{event: "presence_diff"}, socket = %{assigns: %{chat: chat}}) do 33 | {:noreply, 34 | assign(socket, 35 | users: Presence.list_presences(topic(chat.id)) 36 | )} 37 | end 38 | 39 | def handle_info(%{event: "message", payload: state}, socket) do 40 | {:noreply, assign(socket, state)} 41 | end 42 | 43 | def handle_event("message", %{"message" => %{"content" => ""}}, socket) do 44 | {:noreply, socket} 45 | end 46 | 47 | def handle_event("message", %{"message" => message_params}, socket) do 48 | chat = Chats.create_message(message_params) 49 | PhatWeb.Endpoint.broadcast_from(self(), topic(chat.id), "message", %{chat: chat}) 50 | {:noreply, assign(socket, chat: chat, message: Chats.change_message())} 51 | end 52 | 53 | def handle_event("typing", _value, socket = %{assigns: %{chat: chat, current_user: user}}) do 54 | Presence.update_presence(self(), topic(chat.id), user.id, %{typing: true}) 55 | {:noreply, socket} 56 | end 57 | 58 | def handle_event( 59 | "stop_typing", 60 | value, 61 | socket = %{assigns: %{chat: chat, current_user: user, message: message}} 62 | ) do 63 | message = Chats.change_message(message, %{content: value}) 64 | Presence.update_presence(self(), topic(chat.id), user.id, %{typing: false}) 65 | {:noreply, assign(socket, message: message)} 66 | end 67 | 68 | defp default_user_presence_payload(user) do 69 | %{ 70 | typing: false, 71 | first_name: user.first_name, 72 | email: user.email, 73 | user_id: user.id 74 | } 75 | end 76 | 77 | defp random_color do 78 | hex_code = 79 | ColorStream.hex() 80 | |> Enum.take(1) 81 | |> List.first() 82 | 83 | "##{hex_code}" 84 | end 85 | 86 | def username_colors(chat) do 87 | Enum.map(chat.messages, fn message -> message.user end) 88 | |> Enum.map(fn user -> user.email end) 89 | |> Enum.uniq() 90 | |> Enum.into(%{}, fn email -> {email, random_color()} end) 91 | end 92 | end 93 | -------------------------------------------------------------------------------- /lib/phat_web/presence.ex: -------------------------------------------------------------------------------- 1 | defmodule PhatWeb.Presence do 2 | use Phoenix.Presence, 3 | otp_app: :phat, 4 | pubsub_server: Phat.PubSub 5 | 6 | alias PhatWeb.Presence 7 | 8 | def track_presence(pid, topic, key, payload) do 9 | Presence.track(pid, topic, key, payload) 10 | end 11 | 12 | def update_presence(pid, topic, key, payload) do 13 | metas = 14 | Presence.get_by_key(topic, key)[:metas] 15 | |> List.first() 16 | |> Map.merge(payload) 17 | 18 | Presence.update(pid, topic, key, metas) 19 | end 20 | 21 | def list_presences(topic) do 22 | Presence.list(topic) 23 | |> Enum.map(fn {_user_id, data} -> 24 | data[:metas] 25 | |> List.first() 26 | end) 27 | end 28 | end 29 | -------------------------------------------------------------------------------- /lib/phat_web/router.ex: -------------------------------------------------------------------------------- 1 | defmodule PhatWeb.Router do 2 | use PhatWeb, :router 3 | 4 | pipeline :browser do 5 | plug :accepts, ["html"] 6 | plug :fetch_session 7 | plug :fetch_flash 8 | plug Phoenix.LiveView.Flash 9 | plug :protect_from_forgery 10 | plug :put_secure_browser_headers 11 | end 12 | 13 | pipeline :api do 14 | plug :accepts, ["json"] 15 | end 16 | 17 | scope "/", PhatWeb do 18 | pipe_through :browser 19 | 20 | resources "/users", UserController 21 | 22 | resources "/sessions", SessionController, 23 | only: [:new, :create, :delete], 24 | singleton: true 25 | 26 | resources "/chats", ChatController 27 | end 28 | end 29 | -------------------------------------------------------------------------------- /lib/phat_web/services/session.ex: -------------------------------------------------------------------------------- 1 | defmodule PhatWeb.Services.Session do 2 | alias Phat.Repo 3 | alias Phat.Accounts.User 4 | 5 | def authenticate(%{"email" => email, "password" => password}) do 6 | case Repo.get_by(User, email: email) do 7 | nil -> 8 | :error 9 | 10 | user -> 11 | case verify_password(password, user.encrypted_password) do 12 | true -> 13 | {:ok, user} 14 | 15 | _ -> 16 | :error 17 | end 18 | end 19 | end 20 | 21 | defp verify_password(password, pw_hash) do 22 | Comeonin.Bcrypt.checkpw(password, pw_hash) 23 | end 24 | end 25 | -------------------------------------------------------------------------------- /lib/phat_web/templates/chat/index.html.eex: -------------------------------------------------------------------------------- 1 |
<%= link(chat.room_name, to: "/chats/#{chat.id}") %>
4 | <% end %> 5 |36 | <%= user.first_name %><%= elipses(user.typing) %> 37 |
38 | <% end %> 39 |<%= get_flash(@conn, :info) %>
35 |<%= get_flash(@conn, :error) %>
36 | <%= render @view_module, @view_template, assigns %> 37 |A productive web framework that
does not compromise speed or maintainability.