使用socket.io实现简单聊天室案例


Posted in Javascript onJanuary 02, 2018

本文实例为大家分享了socket.io实现简单聊天室的具体代码,供大家参考,具体内容如下

1、客户端【index.html】代码:

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

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

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

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


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

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

      console.log('服务端发来的消息为:', res) ;

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

  </script>
</body>

2、服务端【app.js】代码:

const http = require('http') ;
const server = http.createServer() ;

// web服务器
const express = require('express') ;
const app = express();

app.use(express.static(__dirname + '/public'));

app.listen(8888, function () {
  console.log('web服务器成功启动了,IP:127.0.0.1,端口号:8888') ;
});


// socket服务器

const socketio = require('socket.io') ;
const socket_server = socketio(server) ;

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

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

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

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


server.listen(3000, function() {
  console.log('socket服务器成功启动了,IP:127.0.0.1,端口号:3000') ;  
}) ;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery异步循环获取功能实现代码
Sep 19 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
详解vue中computed 和 watch的异同
Jun 30 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
JS处理一些简单计算题
Feb 24 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 #Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 #Javascript
AngularJS实现的锚点楼层跳转功能示例
Jan 02 #Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
Jan 02 #jQuery
Node实战之不同环境下配置文件使用教程
Jan 02 #Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 #jQuery
Node解决简单重复问题系列之Excel内容的获取
Jan 02 #Javascript
You might like
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
Js 刷新框架页的代码
2010/04/13 Javascript
基于jquery的复制网页内容到WORD的实现代码
2011/02/16 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
用JavaScript实现用一个DIV来包装文本元素节点
2014/09/09 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
基于Vue过渡状态实例讲解
2017/09/14 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
微信小程序实现留言板功能
2018/11/02 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
在Python下使用Txt2Html实现网页过滤代理的教程
2015/04/11 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
Python程序中设置HTTP代理
2016/11/06 Python
详解Python进程间通信之命名管道
2017/08/28 Python
python实现八大排序算法(1)
2017/09/14 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
python微信公众号之关键词自动回复
2018/06/15 Python
Python装饰器简单用法实例小结
2018/12/03 Python
浅析python内置模块collections
2019/11/15 Python
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
2014年党课学习材料
2014/05/11 职场文书
决心书格式及范文
2019/06/24 职场文书
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript