使用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 相关文章推荐
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
javascript变量声明实例分析
Apr 25 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 Javascript
关于JS中prototype的理解
Sep 07 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
javascript产生随机数方法汇总
Jan 25 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
JavaScript对象原型链原理详解
Feb 05 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学习资源和链接.
2006/12/05 PHP
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
PHPMAILER实现PHP发邮件功能
2018/04/18 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
javascript 动态添加事件代码
2008/11/30 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
JS简单实现浮动窗口效果示例
2016/09/07 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
Python常用的爬虫技巧总结
2016/03/28 Python
python 性能提升的几种方法
2016/07/15 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
python编写俄罗斯方块
2020/03/13 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
Python configparser模块操作代码实例
2020/06/08 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
初一体育教学反思
2014/01/29 职场文书
项目建议书范文
2014/05/12 职场文书
银行竞聘演讲稿
2014/05/16 职场文书
会计学自荐信
2014/06/03 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书
2016继续教育研修日志
2015/11/13 职场文书
浅谈Python 中的复数问题
2021/05/19 Python