Home >Web Front-end >JS Tutorial >How to implement a chat room using socket.io

How to implement a chat room using socket.io

亚连Original: 2018-06-14 11:27:042532browse

This article mainly introduces the use of socket.io to implement a simple chat room case, which has certain reference value. Interested friends can refer to it.

The example in this article shares the socket.io implementation with everyone. The specific code of the simple chat room is for your reference. The specific content is as follows

1. Client [index.html] code:

<body>
  <h3>socket简例</h3>
  <hr>
  <p id = &#39;app&#39;>
    <p>
      <p>
        <ul>
          <li v-for = &#39;item in msgs&#39;>
            {{item.name}}说：{{item.content}}
          </li>
        </ul>
      </p>
      <p>
        <p><input type="text" v-model = &#39;msg&#39;><button @click = &#39;m_send()&#39;>发送</button></p>
      </p>
    </p>
  </p>

  <script type="text/javascript" src = &#39;https://cdn.bootcss.com/vue/2.5.9/vue.min.js&#39;></script>
  <script type="text/javascript" src = &#39;https://cdn.bootcss.com/socket.io/1.7.3/socket.io.min.js&#39;></script>
  <script type="text/javascript">

    var _vm = new Vue({
      data :　{
        name : &#39;用户&#39;,
        msg : &#39;&#39;,
        msgs : [],
      },
      methods : {
        m_send : function() {

          // 向客户端发送消息
          socket_client.emit(&#39;say_client&#39;, {
            name : this.name,
            content : this.msg
          }) ;
          this.msg = &#39;&#39; ;
        }
      }
    }).$mount(&#39;#app&#39;) ;


    // socket服务器
    var socket_client = io.connect(&#39;http://127.0.0.1:3000&#39;) ; 

    /**
     * 监听服务端发来的消息
     *
     * 1、“say_server”是客户端发出信息时的key值
     * 2、“res”是客户端传来的value值
     */ 
    socket_client.on(&#39;say_server&#39; ,function(res){

      console.log(&#39;服务端发来的消息为：&#39;, res) ;

      _vm.msgs.push(res);
    });

  </script>
</body>

2. Server [app.js] code:

const http = require(&#39;http&#39;) ;
const server = http.createServer() ;

// web服务器
const express = require(&#39;express&#39;) ;
const app = express();

app.use(express.static(__dirname + &#39;/public&#39;));

app.listen(8888, function () {
  console.log(&#39;web服务器成功启动了，IP：127.0.0.1，端口号：8888&#39;) ;
});


// socket服务器

const socketio = require(&#39;socket.io&#39;) ;
const socket_server = socketio(server) ;

// 建立和客户端的socket连接
socket_server.on(&#39;connection&#39;, function(client) {

// console.log(client) ;          // 查看连接进来的客户端对象内容  
// console.log(Object.keys(client)) ;    // 查看连接进来的客户端对象的关键key值

  /**
   * 监听客户端发来的消息
   *
   * 1、“say_client”是客户端发出信息时的key值
   * 2、“res”是客户端传来的value值
   */ 
  client.on(&#39;say_client&#39;, function(res) {
    console.log(&#39;客户端发来的消息为：&#39;, res) ;

    // 向客户端发送消息
    socket_server.emit(&#39;say_server&#39;, res) ;
  }) ;
}) ;


server.listen(3000, function() {
  console.log(&#39;socket服务器成功启动了，IP：127.0.0.1，端口号：3000&#39;) ;  
}) ;

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How should webpack handle styles?

How to generate word images in js

What are the reference methods for libraries in jQuery

The above is the detailed content of How to implement a chat room using socket.io. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use Angular+ComponentNext article：How to use Angular+Component

See more

How to implement a chat room using socket.io

Related articles