使用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参考实例2.0 用jQuery选择元素
Apr 07 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
Extjs grid panel自带滚动条失效的解决方法
Sep 11 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
Javascript实现前端简单的路由实例
Sep 11 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
Mar 16 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 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 中dirname(_file_)讲解
2007/03/18 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
PHP如何获取Cookie并实现模拟登录
2020/07/16 PHP
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
2016/08/01 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
EasyUI为Numberbox添加blur事件的方法
2017/03/05 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
js验证密码强度解析
2020/03/18 Javascript
详解vue高级特性
2020/06/09 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
python实现一次创建多级目录的方法
2015/05/15 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
django中模板的html自动转意方法
2018/05/27 Python
python内置数据类型之列表操作
2018/11/12 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
Finishline官网:美国一家领先的运动品牌鞋类、服装零售商
2016/07/20 全球购物
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
世界顶级户外运动品牌折扣网站:LeftLane Sports
2019/06/12 全球购物
测绘工程个人的自我评价
2013/11/10 职场文书
银行个人求职自荐信范文
2013/12/16 职场文书
自动化职业生涯规划书范文
2014/01/03 职场文书
初二物理教学反思
2014/01/29 职场文书
电大毕业个人生自我鉴定
2014/03/26 职场文书
个人租房协议书样本
2014/10/01 职场文书
毕业横幅标语
2014/10/08 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
工作经历证明范本
2015/06/15 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
详解Python中__new__方法的作用
2022/03/31 Python
vue实现简易音乐播放器
2022/08/14 Vue.js